Dlaczego pozycja absolutna renderowana jest powyżej pozycji statycznej?

Mam prosty absolutny div i inny zwykły div, który jest w tyle. Dlaczego bezwzględny div jest nadrzędny?Dlaczego pozycja absolutna renderowana jest powyżej pozycji statycznej?

Wiem, że mogę to naprawić z z-index - Ale jaki jest tego powód?

JSBIN: http://jsbin.com/yadoxiwuho/1

<style> 
    .with-absolute { 
     position:absolute; 
     top:0px; 
     bottom:0px; 
     background-color:red 
    } 
    .other { 
     background-color:yellow; 
    } 
    </style> 
    </head> 
<body> 
    <div class="with-absolute">Hello</div> 
    <div class="other">Why is this not on top? It comes last</div> 
</body>

Źródło

2015-05-04 zolv

Absolute:

Oznacza to, że można umieścić go w dowolnym miejscu, a to nie będzie miało wpływu lub mieć wpływ jakiegokolwiek innego elementu w przepływie.

W odróżnieniu od wartości statycznych i względnych, absolutnie pozycjonowany element jest usuwany z normalnego przepływu.

Oto przykładowy kod:

#box_1 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 200px; 
    background: #ee3e64; 
} 
#box_2 { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 200px; 
    height: 200px; 
    background: #44accf; 
}

DEMO od autora dokument Noah Stokesa.

Oczywiście tutaj jest

Źródło

2015-05-04 10:15:09 pcs

Zobacz http://stackoverflow.com/help/referencing, aby uzyskać pomoc w cytowaniu źródeł zewnętrznych. – BoltClock

dziękuję panu ... za informacje. – pcs

absolut element jest umieszczony w stosunku do jego pierwszego umieszczony elementu (nie statyczne) przodka

Reference.

W modelu pozycjonowania bezwzględnego pole jest wyraźnie przesunięte względem względem bloku zawierającego. Zostaje on całkowicie usunięty z normalnego przepływu (nie ma wpływu na kolejne rodzeństwo). Absolutnie ustawione pole umieszcza nowy blok zawierający dla normalnego przepływu i absolutnie (ale nie ustalony) pozycjonowany potomek. Jednak zawartość elementu pozycjonowanego absolutnie nie przepływa przez żadne inne pola . Mogą zasłonić zawartość innego pudełka (lub mogą być zasłonięte), w zależności od poziomów nakładek na nakładających się pudełkach .

Reference.

Źródło

2015-05-04 10:12:49 odedta

Zasadniczą wartością domyślną dla indeksu Z elementów absolutnych jest 0, które znajduje się powyżej pozycji statycznej. Jeśli chcesz go przesunąć, ustaw indeks z na -1.

Źródło

2015-05-04 10:14:20

Wow, od kiedy? Programuję css od 15 lat i nigdy nie musiałem grać z z-indeksami. Elementy bezwzględne pokazano zgodnie z przepływem DOM. Gdybym miał dwa div dzieci, pierwszy absolutny, drugi byłby na górze. –

Wszystkie elementy statyczne Noah Stokes zaDOCUMENT o pozycjonowaniu CSS mają domyślne z-index (auto), co oznacza, zero.

Mam tylko logiczne wytłumaczenie, że dodając do elementu element position: relative|absolute|fixed, umieszczasz go poza przepływem dokumentów, co powoduje, że staje się z-indexem 1.

Źródło

2015-05-04 10:15:50 LinkinTED

Kolejność farby elementy określa się CSS 2.1 spec, E.2 Painting order

statyczne umieszczone elementy malowane są w odstępach od 4 do 7. Absolutna umieszczone elementy o z-indeks 0 pomalowane są w kroku 8, to zawsze na górze.

Źródło

2015-05-04 10:34:37 Alohci

Dziękuję za odpowiedź na to pytanie. Podczas gdy inne odpowiedzi wydają się dostarczać poprawnych informacji, nie widzę, w jaki sposób odnoszą się one do pytania: – Danield

@ Danield Pierwotne pytanie wymagało _reason_. Ta odpowiedź mówi "tylko dlatego!" –

To jest jedyna odpowiedź na to pytanie. – Nigiri

Dlaczego pozycja absolutna renderowana jest powyżej pozycji statycznej?

Odpowiedz

Powiązane problemy