在两个div的宽度上重叠
嗨,我有一个有2列的网站,一个用于主要内容(绿色框),另一个用于侧边栏(蓝色框).
如何创建一个填充两列宽度的div？并重叠他们？
或至少如果我可以在绿色div中创建红色div,它可以某种方式重叠到蓝色div中.
- 制作绿色框
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>