html - 社交媒体图标的位置在页面中不一致

Question

我正在努力使图像保持在与页面更改相同的位置，我知道这很简单，但我似乎无法弄清楚。谢谢，亚当。

http://aginther14.interactivedesignlab.com/index.html

<div id="socialnetworks">
<a href="http://www.linkedin.com/profile/view?id=215921152" target="_blank"><img src="images/linkedin.png" width="40px" height="40px" alt="linkedin"></a>
<a href="http://www.facebook.com/whoisthecoolestpersonalive" target="_blank"><img src="images/facebook.png" width="40px" height="40px" alt="facebook" ></a>
<a href="https://twitter.com/GintherTheGreat" target="_blank" alt="twitter"><img src="images/twitter.png" width="40px" height="40px"></a>
</div>



#socialnetworks {
    padding-left: 16px;
}
}

http://aginther14.interactivedesignlab.com/index.html

Answer 1

Use position:absolute or position:fixed

Absolute

<div id="socialnetworks">
<a href="http://www.linkedin.com/profile/view?id=215921152" target="_blank"><img src="images/linkedin.png" width="40px" height="40px" alt="linkedin"></a>
<a href="http://www.facebook.com/whoisthecoolestpersonalive" target="_blank"><img src="images/facebook.png" width="40px" height="40px" alt="facebook" ></a>
<a href="https://twitter.com/GintherTheGreat" target="_blank" alt="twitter"><img src="images/twitter.png" width="40px" height="40px"></a>
</div>



#socialnetworks {
    position:absolute; bottom:5px; left:16px;
}

This will place it in the bottom left corner and stays there unless the content on the left gets larger.

If you with to keep it in the bottom left at all time use fixed.

Fixed

<div id="socialnetworks">
<a href="http://www.linkedin.com/profile/view?id=215921152" target="_blank"><img src="images/linkedin.png" width="40px" height="40px" alt="linkedin"></a>
<a href="http://www.facebook.com/whoisthecoolestpersonalive" target="_blank"><img src="images/facebook.png" width="40px" height="40px" alt="facebook" ></a>
<a href="https://twitter.com/GintherTheGreat" target="_blank" alt="twitter"><img src="images/twitter.png" width="40px" height="40px"></a>
</div>



#socialnetworks {
    position:fixed;
    bottom:5px;
    left:16px;
}