如何创建重叠的浮动容器？

Question

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

<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 site标记之间，该标记将容器放在主要内容区域之外。但是，它只是将容器放在我的站点的最左上角，在标题区域上方。所以，基本上，它有自己的行跨越我为站点保留的网站宽度，而不是将其放在主要内容区域旁边。

请您帮我调整相应的代码？放置此代码的适当位置在哪里？

提前谢谢！

Answer 1

考虑将其绝对定位（jsFiddle）：

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

如果您希望即使用户向下滚动也能显示，请改为使用position: fixed。

或者，由于您的广告<div>已经在您的内容<div>之外，您可以应用margin-top: 50px或某些变体。

最佳位置是外部CSS文件，但如果必须内联，请将其应用到广告容器<div>。