web-dev-qa-db-ja.com

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

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

CSS：

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

HTML：

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

ブラウザがこのコードをレンダリングするときに2つのdivが同じ場所にあるように、このコードに何を追加する必要がありますか？

csshtml
31
trrrrrrm

絶対配置に関するすべてのステートメントは正しいです。ただし、親コンテナにはposition：relativeが必要であると言及することはできませんでした。

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

上に配置する要素に応じて、絶対配置のdivにz-index esを適用できます。 Zインデックスが高いほど、要素の重要性が高くなり、他の要素の上に配置されます。

#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>
54
Corey Ballou

Z-indexを使用して、divを互いの上に配置します。

[ http://www.w3schools.com/Css/pr_pos_z-index.asp] [1]

したがって、絶対/相対配置でdivを配置し、z-indexを使用してそれらを階層化します。

http://www.w3schools.com/cssref/pr_pos_z-index.asp

3
tahdhaze09

最初の1つの位置を絶対位置にします。これにより、ページの通常のフローから外れます。

ヘルプ 。

0
Dean J

これを行う唯一の方法は絶対配置を使用することです

0
Hogan