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

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

使用position：absolute或position：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:absolute; bottom:5px; left:16px;
}

这将把它放在左下角并保持在那里，除非左边的内容变大。

如果您要始终将其保留在左下方，请使用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;
}