2つのdivをそれぞれ上に配置する方法 質問する

2つのdivをそれぞれ上に配置する方法 質問する

同じポイントから div の描画を開始する方法はありますか? つまり、新しい div を追加してから別の div を追加すると、それらは互いの上に表示されます。同じポイントに応じて、それらをすべて一緒に移動したいからです。

CS: ...

#num1,#num2{
    display : inline
    position:relative;
    left:50px;
}

HTML:

<div id='container'>
    <div id='num1'></div>
    <div id='num2'></div>
</div>

では、ブラウザがこのコードをレンダリングするときに 2 つの div が同じ場所に表示されるようにするには、このコードに何を追加すればよいでしょうか?

ベストアンサー1

絶対位置に関するすべての記述は正しい。しかし、人々は、位置: 相対親コンテナ上。

#container {
  position: relative;
}
#num1,
#num2 {
  position: absolute;
  left: 50px;
}
<div id='container'>
  <div id='num1'>1</div>
  <div id='num2'>2</div>
</div>

どの要素を上に置きたいかに応じて、Zインデックス絶対配置された div に追加します。z-index が高いほど要素の重要性が高まり、他の要素よりも上に配置されます。

#container {
  position: relative;
}
#num1,
#num2 {
  position: absolute;
  left: 50px;
}
/* num2 will be on top of num1 */
#num1 {
  z-index: 1;
}
#num2 {
  z-index: 2;
}
<div id='container'>
  <div id='num1'>1</div>
  <div id='num2'>2</div>
</div>

おすすめ記事