css - 如何创建重叠的 float 容器？

Question

我的网站目前有一个位于页面中心的主要内容区域。我想在这个主要内容区域的左侧创建一个 float 容器，我可以在其中放置广告代码以向访问者展示广告。我希望这个容器位于左侧，介于菜单导航和第一篇博文之间。这是我的代码:

<div> <!-- float container -->
<div style="float: left; display:inline; width:120px;"><p>
<!-- my ad code script -->
</p></div>
<div style="clear:both;"></div>
</div>

我一直将此代码放在 body 标记和 hfeed 站点标记之间，这使容器位于主要内容区域之外。但是，它只是将容器放在我网站的左上角，标题区域上方。因此，从本质上讲，它有自己的行，横跨我网站的宽度，专为容器保留，而不是将其放置在主要内容区域旁边。

你能帮我相应地调整代码吗？放置此代码的正确位置在哪里？

提前致谢!

Answer 1

考虑将其绝对定位 ( jsFiddle ):

position: absolute;
top: 50px; // Or some number
left: 0;

如果您希望即使在用户向下滚动时也能显示它，请使用 position: fixed相反。

或者，由于您的广告 <div>已经在你的内容之外<div> , 你可以申请 margin-top: 50px或一些变化。

这样做的最佳位置是在外部 CSS 文件中，但如果您必须内联执行，只需将其应用到您的广告容器中即可 <div> .