CSS/HTML 定位 - 元素覆盖内容答案

【问题标题】：CSS/HTML positioning - Elements Overlay contentCSS/HTML 定位 - 元素覆盖内容
【发布时间】：2011-12-22 21:05:35
【问题描述】：

如果我的问题很愚蠢，请原谅我，但我不是网络程序员，过去 2 个小时我一直在试图解决这个问题。

所以，我在我的网站上使用 Weebly，并且有一个“内容”区域可以放置元素。然后在“内容”区域的左右两边，我要放置广告。

我已经弄清楚如何使用绝对定位来做到这一点，它在计算机的浏览器上看起来不错，但在移动设备上（无论使用什么用户代理），google adsense 广告都会覆盖我的内容区域。

这是我想要的样子：

~~http://testing.jakaar.net/~~（这个网站已经不存在了。

编辑：http://android.jakaar.net/index.html（这是我的网站，现在可以使用，请参阅下面的问题答案）。

~~但是，这在手机上是行不通的。广告仍然显示，它们只是叠加。~~
编辑：它现在有效，请参阅下面的答案。

我尝试在我的 css 中使用 position:relative 将广告定位在左侧和右侧，但它们要么在我的内容区域上方或下方，因此它会将所有内容向上或向下推。

这是我认为相关的 CSS：

body {
    background: url(bodybg.jpg) top repeat-x;
    background-color:#efefef;
    font-family: arial, sans-serif;
    font-size:12px;
    color:#666666;
    margin:0;
    padding:0;
}

#content{
    margin-left:auto;
    margin-right:auto;
    width: 898px;
    background: #fff;
    min-height: 500px;
    _height: 500px;
    padding: 32px;
}

那么对于 HTML：

<head>
<title>{title}</title>
<style type="text/css">
.right
{
position:absolute;
right:0px;
padding-right:80px;
padding-left:80px;
margin-top:180px;
}
.left
{


   position:absolute;
    left:0px;
    padding-right:80px;
    padding-left:80px;
    margin-top:180px;
    }
    </style>


        <div id="wrapper">
            <div id="header">
                <div id="headerleft">{logo max-height="60"}</div>
                <div id="navigation">{menu}</div>
             </div>

            <div class="right">
    //adsense add that goes on the right
    </div>
    <div class="left">
    //adsense add that goes on the left
    </div>
<div id="content">
        {content}
        </div>

        <div id="footer">{footer}</div>
    </div>

我也尝试过使用float:left 和float:right，但它的行为与绝对定位相同。

非常感谢任何帮助。

【问题讨论】：

标签： css position overlay alignment absolute

【解决方案1】：

我创建了一个 3 列布局，将我的广告放置在第 1 列和第 3 列，然后将“内容”放置在第 2 列。我使用 http://webdesign.about.com/od/csstutorials/ss/css_layout_sbs_9.htm 作为教程。

~~我还为我的广告使用了 position:fixed，以便它们随页面滚动。~~
这导致了我现在不想修复的格式问题，所以我删除了固定位置。

结果在这里：http://android.jakaar.net/index.html

这里是相关的 CSS：

#wrapper {
    width: 1402px;
    margin: 0 0 0 20px; 
    padding: 0;
}
#wrapper #topad
{
margin-top:20px;
margin-bottom:20px;
}
#wrapper #col1 
{ 
width: 190px;
float: left; 
margin-top: 230px;
} 
#col1 #leftad
{
float:right;
position:fixed;
width:160px;
}
#wrapper #col2outer 
{
width: 1202px;
float: right; 
margin: 0; 
padding: 0; 
} 
#col2outer #col2mid 
{ 
width: 962px; 
float: left;
} 
#col2outer #col2side 
{ 
margin-top: 230px;
width: 190px;
float: right; 
}
#col2side #rightad
{
position:fixed;
width:160px;
}

以及相关的HTML：

<body>
<center><!--I used this to enclose the entire body because otherwise everything was off-center, of course-->
    <div id="wrapper">
        <div id="col1">
        <div id="leftad">
        <!--google adsense ad code-->
        </div>
        </div>

        <div id="col2outer">
        <div id="col2mid">
        <div id="header">
            <div id="headerleft">{logo max-height="60"}</div>
            <div id="navigation">{menu}</div>
            </div>
            <div id="topad">
            <!--google adsense ad code-->
        </div>

        <div id="content">
          {content}
          </div>
          </div><!--this is the close of "col2mid"-->

          <div id="col2side"> 
          <!--google adsense ad code-->
          </div>

          </div><!--this is the close of "col2outer"-->



        <div id="footer">{footer}
        </div>

    </div><!--this is the close of "wrapper"-->

    </center>
</body>

【讨论】：

【解决方案2】：

您可以尝试将内容元素的margin-left 和margin-right 设置为您的广告需要的左右尺寸（应为240px = .left padding-left + 左侧广告宽度）。您必须调整内容宽度属性以适应。

顺便说一句，如果您不将网站设置为全屏，那么您可能会在普通浏览器中搞砸您的网站。

请参阅 here 以获取 Box 模型的精美图片。

【讨论】：

我试过了，它有点工作。它弄乱了内容区域的大小，并且还使它无法像我喜欢的那样正确地居中。

【解决方案3】：

您也可以使用负边距将其向左或向右 (-80px) 移动，以便按照我的示例应用一些宽度： http://jsfiddle.net/q7Cf7/

【讨论】：

不幸的是，这仍然有同样的问题。
你也可以在绝对元素上添加负位置
您需要做的就是将您的左右 div 放在主包装或内容区域中。确保您选择放置它的位置具有相对位置和宽度。然后以负边距左右浮动以将它们定位在框外。