☰

CSS: 高さを指定せずに 2 つの要素を重ねて配置するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon css
CSS: 高さを指定せずに 2 つの要素を重ねて配置するにはどうすればよいでしょうか? 質問する

2 つの DIV をぴったり重ねて配置する必要があります。ただし、そうすると、包含する DIV が高さがないかのように動作するため、書式設定が台無しになります。これは予想される動作だと思いますが、position:absoluteこれら 2 つの要素を互いの上に配置して、コンテンツが伸びるのに合わせてコンテナーが伸びるようにする方法を見つける必要があります。

の左上端は、.layer2の左上端と正確に揃う必要があります。layer1

<!-- HTML -->
<div class="container_row">
    <div class="layer1">
        Lorem ipsum...
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

/* CSS */
.container_row {}

.layer1 {
    position:absolute;
    z-index: 1;
}

.layer2 {
    position:absolute;
    z-index: 2;
}

ベストアンサー1

absolute実際には、位置や高さを指定しなくてもこれは可能です。必要なのは、display: grid親要素で使用し、子孫を同じ行と列に配置することだけです。

HTML に基づいて、以下の例を確認してください。<span>結果を確認できるように、いくつかの色のみを追加しました。

z-indexまた、各子孫要素を簡単に変更して、その可視性（どの要素を最上位にするか）を操作することもできます。

.container_row{
  display: grid;
}

.layer1, .layer2{
  grid-column: 1;
  grid-row: 1;
}

.layer1 span{
  color: #fff;
  background: #000cf6;
}

.layer2{
  background: rgba(255, 0, 0, 0.4);
}
<div class="container_row">
    <div class="layer1">
        <span>Lorem ipsum...<br>Test test</span>
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

おすすめ記事