Html 使两个div相互重叠

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

.gray{
位置：相对位置；
背景色：#818181；
}
怀特先生{
背景色：#fff；
}  
蓝先生{
位置：绝对位置；
背景色：#0090ff；
排名：0；
右：10px；
左：100px；
}

左文本
这里有一些文字

这里有一些文字

这里有一些文字

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

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

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

背景色：#818181；
z指数：-1；
高度：300px；
宽度：300px；
位置：绝对位置；
溢出：隐藏；
/*它可以是“溢出：自动”*/
}
怀特先生{
背景色：#fff；
z指数：0；
高度：150像素；
宽度：280px；
位置：绝对位置；
左边距：10px；
边缘顶部：10px；
}  
蓝先生{
背景色：#0090ff；
排名：0；
高度：290px；
宽度：180px；
z指数：1；
位置：绝对位置；
左边距：20px；
边缘顶部：10px；
}  

我为您创建精确的形状：

试试这个

.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

查看此小提琴

将CSS更改为此。 当您向蓝色分区添加更多内容时，灰色将自动调整高度。您可能需要使用和边距值更改一些内容，以获得所需的布局，但机制是存在的

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

---

查看它的工作情况：

所有内容都是绝对的，因此不会随着OP请求而拉伸。您已经为灰框使用了高度属性。如果blue类的内容长度超过300px，则发生溢出。@Hamidghrashi

溢出：隐藏添加到答案中。如果要动态更改div的高度和宽度属性，必须添加一些JavaScript代码。@Daniel
overflow:auto我提到过。你能收回你的反对票吗？@MehmetMertYidiran-你很接近了。将灰色更改为“位置：相对”和“高度：自动”。。。蓝色到“位置：相对；浮动：左侧；高度：自动”；在小提琴中测试，并查看当更多内容添加到蓝色div时div是否响应。。。