pozycja: względne przyczyny, dla których kotwice mogą być niemożliwe do usunięcia

Question

Przeglądałem stronę, którą właśnie rozwijam, próbując naprawić kilka dziwnych błędów IE7, ponieważ jest to projekt wewnętrzny, a IE7 to standardowa przeglądarka. Skończyło się na dodaniu "position: relative", aby poprawić kilka problemów związanych z układem IE, ale wydaje mi się, że pogorszyłem sytuację w FF/Chrome (uważam się raczej za programistę systemów, ale moje obecne obowiązki wiążą się bardziej z siecią skup się niestety).

Specyficznym problemem jest to, że elementy "position: relative" zakończyły się tworzeniem niektórych linków, które zostały przesunięte w prawo, bez możliwości ich kliknięcia. Stworzyłem prostą stronę testową, która, mam nadzieję, wyjaśni to lepiej niż ja słowami: http://jsfiddle.net/gBchZ/.

W końcu przejdę przez ten bałagan, ale miałem nadzieję, że ktoś może wyjaśnić przyczynę ukrywania się moich powiązań za pozycją: względne elementy.

Answer 1

Bez linku strony trudno jest dokładnie określić, co jest nie tak. Ale w każdym razie rozwiązaniem może być użycie z-index dla rodzica a. Na przykład z-index:100. Pamiętaj, że z-index działa tylko z pozycjonowanymi elementami, więc możesz użyć position:relative.

Demo oparte na przykład:http://jsfiddle.net/gBchZ/3/

Answer 2

Dzieje się tak, ponieważ .contentdiv s pokrywają prawy-box (w twoim demo). Jeśli dodasz margin-right tych div a staje się „dotrzeć:”

.content 
{ 
    position: relative; 
    margin-right: 20%; 
} 

JS Fiddle demo

Można również użyć position: absolute; aby element a pojawiają się „wyższa” w z-index, choć staje się dość skomplikowane :

#rightBox 
{ 
    background-color: green; 
    width: 25px; 
    height: 25px; 
    position: absolute; 
    right: 0; 
    top: 50%; 
    margin: -20px .5em .5em .5em; 
    padding: .5em; 
} 

JS Fiddle demo

Answer 3

@David „s rację, że position: relative na .content przedmiotów daje im z-index, co oznacza, że ​​są«na wierzchu»z linku” ve płynął w prawo.

Myślę, że lepszym rozwiązaniem jest jednak, aby dodać position: relative; do linku masz swobodny prawo, jak również i nadać jej z-index wyższy niż .content:

#rightBox 
{ 
    ... 
    position: relative; 
    z-index: 2; 
} 

.content 
{ 
    position: relative; 
    z-index: 1; 
} 

Zobacz http://jsfiddle.net/gBchZ/6/