Z-Index i względne/bezwzględne pozycjonowanie

Question

Mam pewne problemy z z-index i pozycjonowania. Zasadniczo, po najechaniu na pozycji menu (dom, o itp), odpryskami farby powinna ładować pod menu:

http://www.saradouglas.net/home

stylów znajduje się tutaj: http://www.saradouglas.net/wp-content/themes/sara-douglas-theme/style.css

To działało dobrze, gdy każdy div powitalny został ustawiony na absolutne pozycjonowanie, ale zdałem sobie sprawę, że pojawią się one w różnych miejscach w różnych rozdzielczościach ekranu. Myślałem, że będzie to tylko przypadek zmiany tego na względne pozycjonowanie, a następnie odpowiednie dostosowanie współrzędnych. Niestety moje rozpryski nie pojawiają się w menu, tak jak powinny.

Aby wyjaśnić, chcę, aby w menu pojawiły się plamy - aby menu zawsze pojawiło się na wierzchu plam. Stało się to problemem dopiero po ustawieniu menu na względne, a te plamy są absolutne.

Mam nadzieję, że to proste rozwiązanie, a ja po prostu czegoś brakuje. Mam nadzieję, że ktoś tutaj może mi powiedzieć, gdzie się nie udałem i zaoferować rozwiązanie!

Do tej pory przesłano kilka dobrych odpowiedzi, ale niestety nie rozwiązały one mojego problemu. Próbowałem dodać tło menu do klasy ul, a nie div, ale to nie miało żadnego wpływu na problem.

Z góry dziękuję.

Ross

Answer 1

Jeśli dobrze pamiętam kolejność pierwszeństwa Z-indeksów jest coś takiego

• płótnie (gdzie Element jest wyciągnięte/rodzice obszar odkształcalny)
• BG obrazy
• indeks z: -1
• domyślna (0)
• z-index: 1+

Kiedy więc dajesz dowolny element dziecko z-index -1, to nie będzie schodzić poniżej tle rodziców z powodu pierwszeństwa rodziców.

Oto twoje rozwiązanie. Właśnie wypróbowany na firebugu i działa:

1. Usuń obraz bg z # menu i dodaj oddzielny div pod ul.menu przed LI.
2. Podaj css poniżej do tego div.
3. Teraz wszystkie te pociągnięcia pędzlem z-index mniejsze niż -1. -2 działa.

A to powinno być to.

CSS:

position:absolute; 
top:0; 
bottom:0; 
left:0; 
right:0; 
z-index:-1; 
background: url(...); 

wiem, że to nie tak dużo semantyczny, ale hej, to działa, prawda? : P

Answer 2

należy ustawić położenie względem w swoim div menu, a następnie dodać bezwzględne DIV pozycjonowania się w menu za div. wtedy różne rozdzielczości ekranu to nie problem.

Answer 3

Można to zrobić poprzez proste ustawienie BG, Uszczelki i wysokość przy ul zamiast <div id="menu">