如何停止位置元素：从重叠的静态定位元素中修复答案

【问题标题】：How to stop an element that is position:fixed from overlapping static positioned elements如何停止位置元素：从重叠的静态定位元素中修复
【发布时间】：2013-05-10 05:24:05
【问题描述】：

我是 CSS 定位的初学者。

我的问题：我正在尝试创建一个包含社交网站链接的元素。我希望这个元素是“位置：固定；”所以它不会滚动，我也希望它在我的#social div（我试图做到这一点的元素）和#bodycontainer div（包含我网站的其余部分）之间有一个边距 - 我不想要参考浏览器窗口的边距（但基于#bodycontainer div。

基本上我想：

禁止 #social div 重叠 #bodycontainer（网站的其余部分），但保持 #social 的位置：固定。
在#social 和#bodycontainer 之间保持一定距离。我不想基于浏览器窗口的边距，我希望它基于我的#bodycontainer div。我该怎么做呢？（我希望 #social 位于 #bodycontainer 左侧 5 像素处。

我的代码（缩短）：

 <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;
}

我猜这是一个相当简单的问题，我很抱歉。我查看了许多指南，但我无法自行解决。

如果您想改写我的部分问题以便更好地理解它，那么请说 - 我很乐意！

我非常感谢我将获得的任何帮助。

谢谢。

【问题讨论】：

我看不到您的问题，您可以使用jsfiddle.net/h9FqE 来说明问题吗？

标签： html css position positioning overlapping

【解决方案1】：

试试这个：

 <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;
}

【讨论】：