代码之家 › 专栏 › 技术社区 › ptownbro

重叠分区标签,同时保持以下所有分区和内容就位

css html

ptownbro · 技术社区 · 4 月前

我试图在我的第一个div上叠加第二个div。这工作得很好。然而,我遇到的问题是,之后要把所有剩余的内容都放在原地。因为我使用定位来覆盖第二个div,所以它之后的每个元素和内容都没有按预期流动。

我试过:

使用与“清除”、“显示”、“灵活”相关的设置 在多个领域,这并未奏效。
使用容器的高度是其他介入的div标签 ,但这并不总是适用于不同的响应浏览器大小行为,而且它也不正确。
改变div的结构或布局 ,但这并不能解决最终的问题。
我在这个网站上发现了许多其他建议 然而,大多数人只讨论如何进行叠加, 但他们没有回答我关于其他内容之后的影响的具体问题 .

小提琴:

https://jsfiddle.net/ptwonbro/7wg5tpj0/13/

.my-container {
  border: 10px solid black;
  position: relative;
}
.my-div-1 {
  border: 10px solid red;
  background: lightblue;
  height: 100px;
}
.my-div-2 {
  border: 10px solid blue;
  background: white;
  height: 240px;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 10%);
  width: 80%;
}
.my-div-3 {
  border: 10px solid green;
  background: yellow;
  height: 100px;
}

我正在尝试做的事情的示意图:

1 回复 | 直到 4 月前

Paulie_D 4 月前

CSS Grid可以做到这一点,不需要定位。

* {
  margin: 0;
}

.my-header,
.my-footer {
  border: 2px solid silver;
}

.my-container {
  border: 2px solid black;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

.my-div-1 {
  border: 2px solid red;
  background: lightblue;
  height: 50px;
  grid-column: 1;
  grid-row: 1 / span 2;
}

.my-div-2 {
  border: 2px solid blue;
  background: white;
  height: 120px;
  width: 80%;
  margin: auto;
  grid-column: 1;
  grid-row: 2 / span 2;
}

.my-div-3 {
  border: 2px solid green;
  background: yellow;
  height: 50px;
  grid-column: 1;
  grid-row: 4;
}

<div class="my-header">
  <h1>Header</h1>
</div>
<div class="my-body">
  <div class="my-container">
    <div class="my-div-1">body div 1</div>
    <div class="my-div-2">body div 2</div>
    <div class="my-div-3">body div 3</div>
  </div>
</div>
<div class="my-footer">
  <h1>Footer</h1>
</div>