Position de l'élément en CSS - javascript, html, css, css-position

Je suis encore débutant dans l'utilisation de CSS .. J'ai vraiment besoin d'aide pour faire le petit projet de notre équipe pour application mobile: D

Voici ma question: D Est-il possible pour CSS de mettre "un élément" au-dessus de "un autre élément" ??

Par exemple, j'ai l'élément "une planche de bois" et jeavoir un autre élément "bâtons" .. Je voudrais l’élément "stick" derrière l’élément "the woodboard". C’est donc comme un style de panneau publicitaire: D (Si dans Photoshop, nous pouvons simplement faire glisser le calque "colle" sous le calque "tableau")

Si c'est possible, alors comment le faire?

J'essaie de chercher des sources mais je n’ai aucun résultat .. Toute aide serait appréciée: D (code / référence / etc) Merci beaucoup

NB: je ne peux pas poster l'image :( puisque je commence tout juste à utiliser stackoverflow, désolé :(

Réponses:

1 pour la réponse № 1

Oui, vous pouvez, il y a plusieurs façons d'y parvenir.

1ère utilisation position: relative; et z-index(optionnel)

Démo

<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ème vous pouvez utiliser position: absolute; enveloppé à l'intérieur position: relative; récipient

Démo 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;
}

Le premier exemple est utile si vous avez 2 éléments distincts, vous pouvez utiliser position: relative; et positionnez l'élément en conséquence en utilisant top, right, bottom et left Propriétés.

L'autre exemple utilise position: absolute; mais avez-vous vu le changement de balisage? Je me suis positionné absolute la child élément imbriqué à l'intérieur position: relative; élément. Je préférerais cette solution.

z-index est optionnel, disons si vous voulez amener le premier élément au-dessus du second

Démo

Assurez-vous d'utiliser position propriété qui est définie sur relative absolute ou fixed comme z-index ça ne marche pas static qui est la position par défaut.

---

Aussi, je voudrais ajouter ici que je n’ai pas fourni z-index solution pour la démonstration 2 car les éléments sont imbriqués, vous ne pouvez donc pas positionner un élément enfant derrière le parent, il hérite des éléments parents z-index

---

0 pour la réponse № 2

Violon

Vous avez juste besoin d'utiliser z-index propriété.

Documentation:

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

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

Exemple de code:

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

---