Html 如何使左侧的几个div与右侧的一个div重叠？

我正在用CSS制作一个水平条形图。条形图上的条形图可以是一个长条形图，也可以是一个长条形图，在长条形图的末端连接有4个较小的矩形。但是我想在右边也有一个酒吧，很长

当有四个较小的杆连接到长杆的末端时，或者当长杆如此长以至于与右侧的杆重叠时，我希望左侧的杆与右侧的杆顶部重叠。目前，它向下推送内容，并且不重叠。我希望它重叠（而不是向下推内容）

我该怎么做

这就是我到目前为止所做的：

//Bars on the left 
    div.leftbar, div.post, div.static, div.value{height:24px; float:left;position:absolute;}

    div.post1, div.post2, div.post3 {height:24px; float:left;}

    div.post4 {height:24px; float:left;}

//Bar on the right
div.rightbar {height:24px; float:right; z-index:-1;}

.leftbar{background: #4c8fe1;}

.post1{
    background: #1D93C3;
}
.post2{

    background: #2EB0E5;
}
.post3{

    background: #66C4EA;
}
.post4{

    background: #A2DAF1;

//html: 
<div class="leftbar" style="width:31.25%"></div>
<div class="post1" style="width:5%;"></div>
<div class="post2" style="width:5%;"></div>
<div class="post3" style="width:5%;"></div>
<div class="post4" style="width:5%;"></div>
<div class="rightbar" style="width:53%;"></div>

//左侧的条形图
div.leftbar、div.post、div.static、div.value{height:24px；float:left；position:absolute；}
div.post1，div.post2，div.post3{高度：24px；浮点：左；}
div.post4{高度：24px；浮点：左；}
//右边的酒吧
div.rightbar{height:24px；float:right；z索引：-1；}
.leftbar{背景：#4c8fe1；}
.post1{
背景：1D93C3；
}
.post2{
背景：#2EB0E5；
}
.post3{
背景#66C4EA；
}
.post4{
背景：#A2DAF1；
//html:

上面需要注意的一点是，如果左栏后面没有其他四个div，则position absolute有效。如果我设置position:absolute，则它们根本不会出现在图形上，但如果我设置position:absolute，则这四个div为0。重叠有效。我需要重叠才能在两种情况下都有效

我附上了一张水平绘制的图片来说明我的意思。

基本上，如果左栏或右栏中的任何一个都不太长，我现在就有上面的内容。一旦其中一个太长，div就会被向下推

我希望条形图的左侧始终与右侧重叠，这样，如果右侧的蓝色条进一步向左延伸……左侧条位于蓝色条的顶部。

不要浮动

//css

.postcontainer { 
    display: block; 
    position: relative; 
    height: 24px 
}
.leftbar {
    display: inline-block; 
    z-index: 2;
}
.rightbar {
    display: block; 
    position: absolute; 
    right: 0px; 
    top:0px; 
    bottom: 0px
    z-index: 1;
}
.post {
    display: inline-block;
    width: 5%;
    z-index: 2;
}

//html

<div class="postcontainer">
    <div class="leftbar" style="width: 31.25%;"></div>
    <div class="rightbar" style="width: 53%;"></div>
    <div class="post post1"></div>
    <div class="post post2"></div>
    <div class="post post3"></div>
    <div class="post post4"></div>
</div>

---

希望这就是你想要的。

给你的右栏一个大的负边距：

div.leftbar，
邮政司，
静电室，
分区值{
高度：24px；
浮动：左；
}
邮政1组，
邮政2组，
分区邮政3{
高度：24px；
浮动：左；
}
邮政部4{
高度：24px；
浮动：左；
}
右栏分区{
高度：24px；
浮动：对；
position:relative；/*使用内联块去掉float很好。另外，去掉html中的样式标记只是为了获得首选项


正文{
保证金：0；
填充：0
}
.leftbar，
.post1，
.post2，
.post3，
.post4，
.rightbar{
高度：24px；
显示：内联块；
右边距：-4px
}
.post1，
.post2，
.post3，
.post4{
宽度：计算（（50%-（100%/3））/4）
}
.leftbar{
背景：4c8fe1；
宽度：计算（100%/3）
}
.post1{
背景：#1D93C3
}
.post2{
背景：#2EB0E5
}
.post3{
背景：#66C4EA
}
.post4{
背景：#A2DAF1
}
.rightbar{
宽度：50%；
背景：#ff0
}
我的第一个建议是避免过度限定和链接

// bad
ul#someid {..}
.menu#otherid {..}
div.classname {..}

// good
#someid {..}
#otherid {..}
.classname {..}

第二个建议是使用
id
来识别独特的元素

现在让我们回答你的问题：

我们的想法是将
位置：绝对；
和
右侧：0
设置为
。右侧栏
，此时该栏将位于右侧，因此使用
z-index
重叠左侧栏

试试这个：


.container{
位置：相对位置；
溢出：隐藏；
}
.酒吧{
高度：24px；
}
.左栏{
浮动：左；
z指数：1；
位置：相对位置；
}
.leftbar{背景：#4c8fe1；}
#邮政1{
背景：1D93C3；
}
#邮政2{
背景：#2EB0E5；
}
#邮政3{
背景#66C4EA；
}
#邮政4{
背景：#A2DAF1；
}
.rightbar{
位置：绝对位置；
右：0；
背景#54ff4e；
z指数：0；
}

我在我的帖子中添加了一个图像。请看你应该使用嵌入式片段演示或提供外部演示。这很好，使用负边距有什么好处吗？只是有些开发人员对此很势利。：）澄清一下，负边距可能是“修复”的支柱糟糕的布局。使用得宜，它们是一种强大且支持良好的机制。负边距到底意味着什么？它只是允许重叠。在某些情况下，负边距的元素会移动。在其他情况下，附近的内容会被允许侵入元素的空间。移动它们！lol j/k但实际上，移动它们…使用css！：P