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

Question

我在CSS中制作水平条形图。条形图上的条形可以是一个长条形或长条形条形，其中4个较小的矩形连接到较长条形的末端。但是我希望那里还有一个从右边进来的酒吧。

如果长条的末端有四个较小的条，或者长的条长很长，它与右边的条重叠，我希望左边的条重叠在右边的条上。目前，它推下内容并且不重叠。我希望它重叠（不要压下内容）。

我该怎么做？

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

<p>

上面要注意的一点是，如果我在左栏之后没有其他四个div，则绝对有效。如果我设置位置，它们根本不会出现在图表上：绝对但是如果我设置位置：绝对并且那四个div是0.重叠起作用。我需要重叠才能适用于这两种情况。

我附上了一张可怕的图片来说明我的意思。

基本上，如果左边或右边的条不太长，我目前都有上面的内容。一旦任何一个太长，div就会被推倒。

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

Answer 1

给你的右栏留下很大的负余量：

div.leftbar,
div.post,
div.static,
div.value {
  height: 24px;
  float: left;
}
div.post1,
div.post2,
div.post3 {
  height: 24px;
  float: left;
}
div.post4 {
  height: 24px;
  float: left;
}
div.rightbar {
  height: 24px;
  float: right;
  position: relative; /* <-------------- needed for z-index */
  z-index: -1;
  margin-left: -100%; /* <--------------------- margin here */
  background: pink;
}
.leftbar {
  background: #4c8fe1;
}
.post1 {
  background: #1D93C3;
}
.post2 {
  background: #2EB0E5;
}
.post3 {
  background: #66C4EA;
}
.post4 {
  background: #A2DAF1;
}

<p>
<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>
</p>
<br>
<p>
<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:13%;"></div>
</p>

<强> Fiddle demo

Answer 2

不要漂浮！

// 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>

希望这就是你想要的。

Answer 3

使用inline-block来摆脱浮动很不错。也可以在html中删除样式标签，只是为了优先选择。

body {
  margin: 0;
  padding: 0
}

.leftbar,
.post1,
.post2,
.post3,
.post4,
.rightbar {
  height: 24px;
  display: inline-block;
  margin-right: -4px
}

.post1,
.post2,
.post3,
.post4 {
  width: calc((50% - (100%/3))/ 4)
}

.leftbar {
  background: #4c8fe1;
  width: calc(100%/3)
}

.post1 {
  background: #1D93C3
}

.post2 {
  background: #2EB0E5
}

.post3 {
  background: #66C4EA
}

.post4 {
  background: #A2DAF1
}

.rightbar {
  width: 50%;
  background: #ff0
}

<div class="leftbar"></div>
<div class="post1"></div>
<div class="post2"></div>
<div class="post3"></div>
<div class="post4"></div>
<div class="rightbar"></div>

<强> Fiddle demo

Answer 4

我的第一个建议是避免过度资格和链接

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

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

，第二个建议是使用id来识别唯一元素。

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

我们的想法是将position: absolute;和right: 0设置为.rightbar，此时栏位于右侧，因此请使用z-index重叠左侧栏。

试试这个：

.container{
    position: relative;
    overflow: hidden;
}

.bar{
    height: 24px;
}

.left-bars{
    float:left;
    z-index: 1;
    position: relative;
}

.leftbar{background: #4c8fe1;}

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

    background: #2EB0E5;
}
#post3{

    background: #66C4EA;
}
#post4{
    background: #A2DAF1;
}
.rightbar{
    position: absolute;
    right: 0;
    background: #54ff4e;
    z-index: 0;
}

<div class="container">
    <div class="bar left-bars leftbar" style="width:31.25%"></div>
    <div id="post1" class="bar left-bars" style="width:5%;"></div>
    <div id="post2" class="bar left-bars" style="width:5%;"></div>
    <div id="post3" class="bar left-bars" style="width:5%;"></div>
    <div id="post4" class="bar left-bars" style="width:5%;"></div>
    <div class="bar rightbar" style="width:53%;"></div>
</div>