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

まず最初に、絶対配置された要素の位置を実際に含める必要があります。そうしないと、奇妙で​​紛らわしい動作に遭遇します。おそらくtop: 0; left: 0、絶対配置された要素の両方のCSS に追加する必要があります。あなたも持っているしたいと思うposition: relativeに.container_rowあなたは絶対配置要素が配置されるようにしたい場合は、むしろ、ドキュメントの体よりも親に関して：

要素に「位置：絶対」がある場合、包含ブロックは「絶対」、「相対」、または「固定」の「位置」を持つ最も近い祖先によって確立されます...

あなたの問題はposition: absolute、通常のフローから要素を削除することです：

通常のフローから完全に削除されます（後の兄弟には影響しません）。絶対位置のボックスは、通常のフローの子と絶対位置の（ただし固定されていない）子孫の新しい包含ブロックを確立します。ただし、絶対配置された要素のコンテンツは、他のボックスの周囲には流れません。

つまり、絶対配置された要素は、親要素のサイズにまったく影響せず、最初の要素の<div class="container_row">高さはゼロになります。

したがって、要素の高さがわからない場合（または、要素の高さを指定できる場合）を除いて、絶対配置の要素で実行しようとしていることを実行することはできません。高さを指定できる場合は、同じ高さをに置くことができ.container_row、すべてが揃います。またmargin-top、2番目に.container_rowを配置して、絶対配置された要素のためのスペースを空けることもできます。例えば：

http://jsfiddle.net/ambiguous/zVBDc/

実際、これは位置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>

「muが短すぎる」というすばらしい答え。私はまったく同じものを探していましたが、あなたの投稿を読んだ後、私の問題に合った解決策を見つけました。

まったく同じサイズの2つの要素があり、それらを積み重ねたいと思っていました。どれも同じサイズなので、作れるのは

position: absolute;
top: 0px;
left: 0px;

最後の要素のみ。このようにして、最初の要素が正しく挿入され、親の高さが「プッシュ」され、2番目の要素が上に配置されます。

これが他の人々が同じ（不明な）高さの2+要素を積み重ねようとするのを助けることを願っています。

ディスプレイを使用する別のソリューションは次のとおりです。位置の代わりにフレックス：絶対またはディスプレイ：グリッド。

.container_row{
  display: flex;
}

.layer1 {
  width: 100%;
  background-color: rgba(255,0,0,0.5);  // red
}

.layer2{
  width: 100%;
  margin-left: -100%;
  background-color: rgba(0,0,255,0.5);  // blue
}

<div class="container_row">
    <div class="layer1">
        <span>Lorem ipsum...</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>

設定しなければならなかった

Container_height = Element1_height = Element2_height

.Container {
    position: relative;
}

.ElementOne, .Container ,.ElementTwo{
    width: 283px;
    height: 71px;
}

.ElementOne {
    position:absolute;
}

.ElementTwo{
    position:absolute;
}

z-indexを使用して、どちらを上にするかを設定できます。

以下は、使用せずに各要素の高さを維持する再利用可能なcssですposition: absolute。

.stack {
    display: grid;
}
.stack > * {
    grid-row: 1;
    grid-column: 1;
}

の最初の要素stackは背景で、2番目の要素は前景です。

絶対配置のため、ドキュメントフロー位置から要素が削除されます。絶対配置は、ジョブに適したツールではありません。作成する正確なレイアウトに応じて、負のマージン、position：relativeまたは多分変換：translateを使用して成功します。あなたがやりたいことのサンプルを見せてください。

もちろん、問題は身長を元に戻すことです。しかし、事前に高さがわからない場合はどうすればよいでしょうか。コンテナに与えるアスペクト比がわかっている場合（そして応答性を維持する場合）、パーセンテージで表されるコンテナの別の子にパディングを追加することにより、高さを戻すことができます。

ダミーdivをコンテナに追加padding-top: 56.25%して、ダミー要素にコンテナの幅の比率である高さを与えるようなものを設定することもできます。これにより、コンテナが押し出され、アスペクト比（この場合は16：9（56.25％））になります。

パディングとマージンは幅のパーセンテージを使用します。これが本当にここでのトリックです。

多くのテストの結果、元の質問がすでに正しいことを確認しました。いくつかの設定がありません：

• container_row持っている必要がありますposition: relative;
• 子供（...）、持っている必要があります position: absolute; left:0;
• 子（...）が互いに正確に整列することを確認するにcontainer_rowは、に追加のスタイルを設定する 必要があります。
  • height:x; line-height:x; vertical-align:middle;
  • text-align:center; また、助けることができます。