1

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

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

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

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

谢谢你。

4

1 回答 1

0

尝试这个：

 <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;
}
于 2013-05-09T21:24:05.347 回答