使两个 div 相互重叠

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>
  

这是我满意的结果：

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

Answer 1

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

如果你想在蓝色div下获得白色div，你需要将其设置为position:absolute并将其z-indx设置为小于蓝色div的z-indx