Chrome: nie można ustawić jednego bezwzględnego elementu div nad drugim, gdy rodzic jest ustalony.

Question

Odkryłem, że nie mogę umieścić jednego absolutnie pozycjonowanego elementu div nad innym w Chrome, gdy rodzicem elementu div, który chcę być na górze, jest naprawiono:

<div id="parent"> 
    <div id="top"></div> 
</div> 
<div id="bottom"></div> 

Oto JSFiddle wykazując problemu:

http://jsfiddle.net/SEJhg/

powinieneś zobaczyć, że w Chrome żółtą pozycjonowane absolutnie div z-index 10 pojawia się za zielonym absolutnie umieszczonej div z z -index: 1, beca wykorzystanie stałej pozycji rodzica.

Inne przeglądarki, takie jak Firefox, pokazują żółty div na zielonym.

Wszelkie sugestie, jak to naprawić w Chrome? Nie jestem w stanie zmienić stałej pozycji rodzica.

Dzięki!

Answer 1

czego doświadczamy jest stosunkowo nowe zachowanie w Chrome, wprowadzone w celu dostosowania zachowania przeglądarki pulpitu z przeglądarek mobilnych.

Gdy element ma position: fixed;, podobnie jak twój #parent, dla tego elementu tworzony jest nowy kontekst stosowy, co oznacza, że ​​element i jego elementy podrzędne są ułożone relatywnie względem siebie, zamiast relatywnie do kontekstu okna. Dlatego element, który nie jest dzieckiem stałego elementu (#bottom) nie może być umieszczony pomiędzy "#parent i #top.

Twój rozwiązaniem byłoby albo przesunąć #bottom wewnątrz #parent (wprowadzenie jej w tym samym kontekście stosu) lub zmianę metody pozycjonowania #parent do czegoś innego niż ustalony.

Propozycja tej zmiany w Chrome można znaleźć tutaj: http://lists.w3.org/Archives/Public/www-style/2012May/0473.html

Answer 2

pozycja Cthe tylko dla chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
#parent { 
    position: absolute; 
    } 
} 

Zobacz http://jsfiddle.net/5fKq6/ we wszystkich przeglądarkach.

Answer 3

Mam do czynienia z tym i do wniosku doszedłem do tego, że w chromie elementy parent i top są nierozłączne. Próbowałem dojść do tego wniosku umieszczając element "bottom" powyżej "kanapki" i bawiąc się z-indeksami. Mogę sprawić, że bottom pojawi się powyżej lub poniżej kanapki, ale nie bezpośrednio w niej.

Co nie działa dla mnie było to:

<div id="parent"> 
    <div id="bottom"></div> 
    <div id="top"></div> 
</div> 

nie wiem kontekst swojej stronie więc to może być bezużyteczny odpowiedź dla ciebie, ale myślę, że w ten sposób, a następnie dostosowania do pozycjonowania uzyskać pożądany wynik w osiach X i Y strony będzie łatwiejsze niż próba ześlizgnięcia się elementu z kanapki z zewnątrz, tak jak się spodziewaliśmy.

Answer 4

Spróbuj ten kod:

<div id="parent"> 
<div id="bottom"></div> 

</div>

<div id="top"></div> 

Answer 5

używam wersji Chrome: 21.0.1180.89 m, a żółty jest umieszczony powyżej zielono.