CSSの要素位置 - javascript、html、css、css-position

私はまだCSSの使用に慣れていません。 私は本当に私たちのチームのモバイルアプリのための小さなプロジェクトを行うための助けが必要です：D

これが私の質問です：D CSSが「1つの要素」を「別の要素」の上に置くことは可能ですか？

たとえば、私は「木の板」の要素を持っていて、別の要素「スティック」を持っている.. 「木の板」要素の後ろに「スティック」要素が欲しいのですが、ビルボードスタイルのようです：D （Photoshopの場合、レイヤー「スティック」をレイヤー「ボード」の下にドラッグするだけです）

可能であれば、それをどのように行うのですか？

いくつかのソースを探しようとしましたが、結果が得られませんでした。 任意の助けをいただければ幸いです：D（コード/参照/など） どうもありがとう

注意：画像を投稿できません:(スタックオーバーフローを使い始めたばかりなので、申し訳ありません:(

回答：

回答№1は1

はい、できます。それを達成する方法は複数あります。

1回目 position: relative; そして z-index（オプション）

デモ

<div class="one"></div>
<div class="two"></div>


.one {
height: 100px;
width: 100px;
background: #f00;
}

.two {
height: 100px;
width: 100px;
background: #0f0;
position: relative;
top: -70px;
left: 30px;
}

2番目に使用できます position: absolute; 中に包まれた position: relative; コンテナ

デモ2

<div class="one">
<div class="two"></div>
</div>

.one {
height: 100px;
width: 100px;
background: #f00;
position: relative;
}

.two {
height: 100px;
width: 100px;
background: #0f0;
position: absolute;
bottom: -30px;
left: 30px;
}

最初の例は、2つの別々の要素がある場合に役立ちます。 position: relative; それに応じて要素を配置します top, right, bottom そして left プロパティ。

他の例では position: absolute; しかし、マークアップの変化を見ましたか？私は位置づけました absolute その child 内部にネストされている要素 position: relative; 素子。私はこの解決策を好みます。

z-index オプションです。たとえば、1番目の要素を2番目に表示する場合

デモ

あなたが使用することを確認してください position に設定されているプロパティ relative absolute または fixed として z-index 仕事をしていない static これがデフォルトの位置です。

---

また、私が提供しなかったことをここに追加したいと思います。 z-index 要素がネストされているため、親の後ろに子要素を配置することはできず、親要素を継承するため、デモ2のソリューション z-index

---

回答№2の場合は0

フィドル

あなたはちょうど使用する必要があります Z-インデックス プロパティ。

ドキュメンテーション：

http://css-tricks.com/almanac/properties/z/z-index/

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

サンプルコード：

  #hermano-0{//for base layer--zindex is 0
z-index:0;
top:0; left:0;
background:red;
}
#hermano-1{for layer above it we give z-index =1
z-index:1;
top:20px;
left:20px;
background:#a3dbcb;
}
#hermano-N{ for layer above it we give z-index =2
z-index:2;
top:40px;
left:40px;
background:gray;
color:white;
}

---