重叠两个div的宽度 [英] overlap across width of two divs
本文介绍了重叠两个div的宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个网站，该网站有2列，一列用于主要内容(绿色框)，一列用于侧边栏(蓝色框).
Hi I have a website with 2 columns, one for main content(green box) and one for sidebar(blue box).
如何创建一个可填充两列宽度的div?并重叠它们?
How can a create a div that fills the width of the two columns? and overlaps them?
或者至少，如果我可以在绿色div内创建红色div，那么它可以以某种方式重叠到蓝色div中.
or atleast if i can create the red div inside the green div it can somehow overlap into the blue one.
推荐答案
- 将绿色框标为
position:relative - 将红色框置于绿色框内
- 将红色框标为
position:绝对；顶部:#px其中#px是您想要的距离绿色框顶部的距离 - 再次，设置绿色框
溢出:可见，将红色框的宽度设置为所需的宽度. - Make the green box
position: relative - Make the red box inside the green box
- Make the red box
position: absolute; top: #pxwhere #px is how far you down you want it from the top of the green box - Again, set green box
overflow: visibleand the red box width as wide as you need.
如果布局的宽度可变，则可能需要发挥创意.
If the width of your layout is fluid, you might need to get creative.
这是一个cr脚的例子:
Here is a crappy example:
<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>
这篇关于重叠两个div的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
