Question

我想使用css使两个div重叠。我使用了下面的代码，但是当一些文本或内容被添加到蓝色框时，它会溢出灰色框，而我想将它保持在灰色框内并在内部内容被拉伸时拉伸它。

.gray {
  position: relative;
  background-color: #818181;  
}

.white {
  background-color: #fff;
}  

.blue {
  position: absolute;
  background-color: #0090ff;
  top: 0;
  right: 10px;
  left: 100px;
}

<div class="gray">
  <div class="white">
    left text
  </div>  
  <div class="blue">
    <p>some text goes here</p>
    <p>some text goes here</p>
    <p>some text goes here</p>
  </div>    
</div>

这是我满意的结果：

enter image description here

如何更正css以获得上述结果？

Answer 1

将CSS更改为此。当您向蓝色div添加更多内容时，灰色将自动调整高度。您可能需要更改一些with和margin值以获得所需的布局，但机制就在那里。

.gray {
    background-color: #818181;
    z-index: -1;
    height: auto;
    width: 300px;
    position: absolute;
    overflow: hidden;
}
.white {
    background-color: #fff;
    z-index: 0;
    height: 150px;
    width: 280px;
    position: absolute;
    margin-left: 10px;
    margin-top: 10px;
}
.blue {
    background-color: #0090ff;
    top: 0;
    height: auto;
    width: 180px;
    z-index: 1;
    position: relative;
    float:left;
    margin-left: 60px;
    margin-top: 10px;
}

看到它的工作：http://jsfiddle.net/djwave28/dj9wo8ak/4/

Answer 2

因此，您需要将蓝框定义为相对溢出将停止的位置，并且当您向蓝色div添加一些内容时，它不会溢出。

如果你想在蓝色div下得到白色div，你需要将它设置为position：absolute并设置z-indx小于blue div

Answer 3

试试这个

.gray {
  position: relative;
  background-color: #818181;  
  height: 200px;
  width: 100%;
}

.white {
  background-color: #fff;
  float: left; 
  width: 97%; 
  position: relative; 
  z-index: 2; 
  height: 50%; 
  left: 1%

}  

.blue {
  position: relative;
  background-color: #0090ff;
  z-index:3;
  width:40%;
  height:100%;
  top: -9%;
  left: 8%;
}

使用高度和宽度尺寸来达到您想要的尺寸。对位置值执行相同操作以按您希望的方式放置div

看到这个小提琴http://jsfiddle.net/u50jj2e1/1/

Answer 4

.gray {
  background-color: #818181;
  z-index: -1;
  height: 300px;
  width: 300px;
  position: absolute;
  overflow: hidden;
  /* Instead of hidden it could be "overflow: auto;"*/
}

.white {
  background-color: #fff;
  z-index: 0;
  height: 150px;
  width: 280px;
  position: absolute;
  margin-left: 10px;
  margin-top: 10px;
}  

.blue {
  background-color: #0090ff;
  top: 0;
  height: 290px;
  width: 180px;
  z-index: 1;
  position: absolute;
  margin-left: 20px;
  margin-top: 10px;
}  


<div class="gray">
  <div class="white">
  </div>  
  <div class="blue">
  </div>
</div>

我为您创建了精确的形状：http://jsfiddle.net/dj9wo8ak/1/

使两个div相互重叠

4 个答案: