/ / element absolutny zagnieżdżony musi znajdować się w górnej części elementu - html, css

zagnieżdżony element absolutny musi znajdować się w górnej części dolnego elementu - html, css

To jest bardzo prosty kod, aby zadać pytanie.

1) Czy istnieje inny sposób, aby zagnieżdżony "wewnętrzny" element div był na wierzchu "dolnego" elementu div, jedyny sposób, w jaki mogę to zrobić, to nadanie "wewnętrznej wartości div wartości liczby całkowitej z-index.

przykład działa z z-index:90; ale nie z-index: auto;

Nie jestem w stanie zmienić html / css "zewnętrznego" i "dolnego" elementu div.

2) Czy to jest problem, ponieważ kolejność renderowania html?

.outer {
background: red;
width: 200px;
height: 100px;
position: relative;
z-index: auto;
}
.inner {
background: yellow;
width: 50px;
height: 50px;
position: absolute;
left: 0;
top: 90px;
z-index: 90;
/* z-index: auto; why is it not working?*/
}
.bottom {
background: blue;
width: 200px;
height: 100px;
position: relative;
}
<div class="outer">
<div class="inner">testing testing</div>
</div>
<div class="bottom"></div>

Odpowiedzi:

2 dla odpowiedzi № 1

Dzieje się tak, ponieważ auto daje to z-index jego elementu nadrzędnego Elementy umieszczone niżej w DOM są umieszczone nad elementami nad nimi.

Dokumentacja MDN

Pole nie ustanawia nowego lokalnego kontekstu stosowego. Poziom stosu wygenerowanego pola w bieżącym kontekście stosu jest taki sam, jak jego pole rodzica.

Na przykład:

div{
height:100px;
position:relative;
}
div:after{
position:absolute;
content:"Test";
top:100%;
}
.upper{
background:red;
}
.lower{
background:blue;
}
<div class="upper"></div>
<div class="lower"></div>
Jak widać, .upper jest renderowany jako .lower, więc tekst z .upper jest ukryty.


0 dla odpowiedzi nr 2

Używając z-index: auto;, dajesz elementowi indeks z elementu nadrzędnego (0jeśli rodzic nie ustawił wartości). Jeśli masz element z pozycją niestatyczną po pierwszym w DOM (również z z-index: 0), drugi ma pierwszeństwo przed pierwszym. Przeglądarka zawsze pokazuje ostatni element na górze, jeśli ma taki sam indeks Z.

Można zdefiniować dodatni lub ujemny indeks z, aby zmienić domyślne zachowanie.


0 dla odpowiedzi № 3

żyć niebieskim polu w static pozycja lub zestaw z-index:1; do .outer div. cokolwiek jest w środku .outer będzie odnosić się do .outer z-index wartość.

przykład bez z-index, pozwolić position:relative wypracowuje sobie drogę do góry:

.outer {
background: red;
width: 200px;
height: 100px;
position: relative;
/* default value, no need to rewrite it del this >z-index: auto; */
}
.inner {
background: yellow;
width: 50px;
height: 50px;
position: absolute;
left: 0;
top: 90px;
/* z-index: 1;1 would be enough if none set elsewhere in same area  */
}
.bottom {
background: blue;
width: 200px;
height: 100px;
/* position: relative; drop it  no need of z-index relative,absolute,fixed comes on top of static element */
}
<div class="outer">
<div class="inner">testing testing</div>
</div>
<div class="bottom"></div>

Jeśli chcesz zachować position:relative dla niebieskiego pudełka, zestaw z-index na .outer tylko

.outer {
background: red;
width: 200px;
height: 100px;
position: relative;
z-index: 1;
}
.inner {
background: yellow;
width: 50px;
height: 50px;
position: absolute;
left: 0;
top: 90px;
}
.bottom {
background: blue;
width: 200px;
height: 100px;
position: relative;
}
<div class="outer">
<div class="inner">testing testing</div>
</div>
<div class="bottom"></div>