Pozycja elementu w CSS - javascript, html, css, css-position

Wciąż jestem nowicjuszem w używaniu CSS. Naprawdę potrzebuję pomocy przy realizacji małego projektu naszego zespołu na aplikację mobilną: D

Oto moje pytanie: D Czy CSS może umieścić „jeden element” nad „innym elementem”?

Na przykład mam element „drewniana deska” i jamieć inny element „patyki”. Chciałbym, żeby element „stick” znajdował się za elementem „drewniana tablica” .. Więc to jest jak w stylu billboardu: D (W Photoshopie możemy po prostu przeciągnąć warstwę „patyki” poniżej warstwy „plansza”)

Jeśli to możliwe, to jak to zrobić?

Próbuję poszukać źródeł, ale nie uzyskałem żadnego wyniku. Każda pomoc byłaby mile widziana: D (kod / odniesienie / itp.) Wielkie dzięki

NB: nie mogę opublikować obrazu :( ponieważ dopiero zaczynam używać stackoverflow, przepraszam :(

Odpowiedzi:

1 dla odpowiedzi № 1

Tak, można to osiągnąć na wiele sposobów.

Pierwsze użycie position: relative; i z-index(opcjonalny)

Próbny

<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. możesz użyć position: absolute; zawinięty w środku position: relative; pojemnik

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

Pierwszy przykład jest przydatny, jeśli masz 2 oddzielne elementy, których możesz użyć position: relative; i odpowiednio ustawić element za pomocą top, right, bottom i left nieruchomości.

Drugi przykład używa position: absolute; ale czy zauważyłeś zmianę w znacznikach? Ustawiłem się absolute temu child element, który jest zagnieżdżony w środku position: relative; element. Wolałbym to rozwiązanie.

z-index jest opcjonalne, powiedz, czy chcesz, aby pierwszy element był przenoszony na drugi

Próbny

Upewnij się, że używasz position właściwość, która jest ustawiona na relative absolute lub fixed tak jak z-index nie działa static która jest pozycją domyślną.

---

Chciałbym również tutaj dodać, że nie podałem z-index rozwiązanie dla Demo 2, ponieważ elementy są zagnieżdżone, więc nie możesz umieścić elementu podrzędnego za rodzicem, dziedziczy on elementy nadrzędne z-index

---

0 dla odpowiedzi nr 2

Skrzypce

Musisz tylko użyć z-index własność.

Dokumentacja:

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

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

PRZYKŁADOWY KOD:

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

---