Question

您好我有一个包含2列的网站，一个用于主要内容（绿色框），另一个用于侧边栏（蓝色框）。

如何创建一个填充两列宽度的div？并重叠他们？

或至少如果我可以在绿色div中创建红色div，它可以某种方式重叠为蓝色div。

enter image description here

Answer 1

制作绿框position: relative
在绿框内制作红框
制作红色框position: absolute; top: #px，其中#px是您从绿色框顶部向下移动的距离
再次，将绿框overflow: visible和红框宽度设置为您需要的宽度。

如果布局的宽度不稳定，您可能需要获得创意。

这是一个糟糕的例子：

<html>
<head>
<title>Foo</title>
<style type="text/css">

    #green-box { width: 400px; background: green; float: left; position: relative; height: 300px; overflow: visible; position: relative; }
    #blue-box { width: 100px; background: blue; float: left; height: 300px; }
    #red-box {
        position: absolute;
        top: 50px;
        width: 500px;
        background: red;
        height: 10px;
    }
</style>
</head>
<body>

    <div id="container">

        <div id="green-box">
            <p>Here is some text!</p>
            <div id="red-box"></div>
        </div>
        <div id="blue-box">

        </div>

        <div style="clear: both"></div>
    </div>

</body>
</html>

Answer 2

您可以使用以下代码

<强> CSS

 body,html {height:100%}
  #content {width:66.6%;height:100%;background:green;float:left;}
  #sidebar {width:33.3%;height:100%;background:blue;float:left;}
  #floated {width:100%;height:100px;background:red;position:absolute;top:300px;}

<强> HTML

<div id="content"></div>
<div id="sidebar"></div>
<div id="floated"></div>

演示： http://jsbin.com/odabe3/3

秘诀是将floated div与position:abolute;放在一起，在这种情况下，300px位于文档的顶部。这将使它仍然存在。如果要在滚动时移动它，可以将position:absolute;更改为position:fixed;。在任何情况下，您都可以从正常流中取出一个元素并将其放置在您需要的位置。您可以在w3文档http://www.w3.org/TR/CSS2/visuren.html#choose-position中找到有关position的更多信息。您还可以在http://www.alistapart.com/articles/css-positioning-101/

找到示例和优秀的定位指南

在两个div的宽度上重叠

2 个答案: