Question

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

我猜这是一个非常简单的问题，我道歉。我看了很多指南，一直无法自己搞清楚。

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

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

谢谢。

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

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

1 个答案: