我是 CSS 定位的初学者。
我的问题: 我正在尝试创建一个包含社交网站链接的元素。我希望这个元素是“position:fixed;”所以它不会滚动，我也希望它在我的#social div(我试图做到这一点的元素)和#bodycontainer div(包含我网站的其余部分)之间有一个空白 - 我不想引用浏览器窗口的边距(但基于#bodycontainer div。
基本上我想:
- 禁止#social div 与#bodycontainer(网站的其余部分)重叠，但保持#social 的位置:固定。
- 在#social 和#bodycontainer 之间保持一定距离。我不想基于浏览器窗口的边距，我希望它基于我的#bodycontainer div。我该怎么做呢？ (我希望#social 位于#bodycontainer 左侧 5px。
我的代码(缩短):
<body>
<div id="social">
<div id="socialimages">
<a href="http://facebook.com/connor.lydon" target="_blank">
<img src="fblogo.gif">
</a>
<a href="http://instagram.com/connorlydon" target="_blank">
<img src="instalogo.gif">
</a>
</div>
</div>
<div id="bodycontainer">
<img src="lydon_websiteanimation.gif" id="header">
</div>
</body>
#social {
position: fixed;
float: left;
width: 200px;
height: 100px;
margin-left: 10px;
background-image: url(socialtalk.png);
background-repeat: no-repeat;
background-position: top-left;
}
#socialimages {
width: 45px;
height: 100px;
margin-left: 200px;
margin-top: 60px;
}
#bodycontainer {
margin-left: auto;
margin-right: auto;
width: 726px;
}
我猜这是一个非常简单的问题，我深表歉意。我看过很多指南，但自己搞不清楚。
如果您想重新表述我的问题的一部分以便更好地理解它，那么请说 - 我很乐意!
我非常感谢我能得到的任何帮助。
谢谢。
最佳答案
试试这个:
<body>
<div id="social">
<div id="socialimages">
<a href="http://facebook.com/connor.lydon" target="_blank">
<img src="fblogo.gif">
</a>
<a href="http://instagram.com/connorlydon" target="_blank">
<img src="instalogo.gif">
</a>
</div>
</div>
<div id="bodycontainer">
<img src="lydon_websiteanimation.gif" id="header">
</div>
</body>
#social {
position: fixed;
float: left;
width: 200px;
height: 100px;
margin-left: 10px;
background-image: url(socialtalk.png);
background-repeat: no-repeat;
background-position: top-left;
}
#socialimages {
width: 45px;
height: 100px;
margin-left: 200px;
margin-top: 60px;
}
#bodycontainer {
width: 726px;
position: absolute;
left: 50%;
margin-left: -363px;
z-index: 1;
}
关于html - 如何停止位置为 :fixed from overlapping static positioned elements 的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16471169/