html - 使两个div相互重叠

Question

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

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

这是我满意的结果:

如何更正 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/