Где находится «позиция: относительная»; база компенсируется?

Question

Из моего макета я заметил, что мой элемент «navsprite» не центрируется вертикально, когда я использую «position: relative»; как это свойство, вот мой документ, и в основном это спрайт изображения, который я пытаюсь центрировать по горизонтали и вертикали, за исключением того, что, как я сказал, он не вертикально, если я использую «position: relative»; вместо «position: absolute»; для моего элемента «navsprite».

#navsprite { 
 
    width: 134px; 
 
    position: relative; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -67px; 
 
    margin-top: -22px; 
 
} 
 
#navsprite li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    position: absolute; 
 
    top: 0px; 
 
} 
 
#navsprite a { 
 
    height: 44px; 
 
    display: block; 
 
} 
 
#home { 
 
    left: 0px; 
 
    width: 46px; 
 
    height: 44px; 
 
    background: url(/favicon.ico) 0 0; 
 
} 
 
#prev { 
 
    left: 63px; 
 
    width: 43px; 
 
    height: 44px; 
 
    background: url(/favicon.ico) -47px 0; 
 
} 
 
#next { 
 
    left: 129px; 
 
    width: 43px; 
 
    height: 44px; 
 
    background: url(/favicon.ico) -91px 0; 
 
}

<ul id="navsprite"> 
 
    <li id="home"> 
 
    <a href="#"></a> 
 
    </li> 
 
    <li id="prev"> 
 
    <a href="#"></a> 
 
    </li> 
 
    <li id="next"> 
 
    <a href="#"></a> 
 
    </li> 
 
</ul>

Теперь она пришла мне в голову, что в отличие от "позицию: абсолютная;" который основывает свое смещение от его родительского элемента тела, «position: relative»; полностью не делает то же самое, и я задаюсь вопросом, где он базируется, это смещено с тех пор, как вы видите, спрайт изображения только перемещается -22px в начало, потому что по какой-то причине «top: 50%;» не имеет никакого эффекта (это если это позиция: relative;), или если это имеет какой-то эффект, то я не знаю, что и где.

Так что мой вопрос: «позиция: относительная»; основывать свое смещение где-то еще? или он не основывает свое смещение вообще? или это вообще имеет какое-либо влияние? или я пропустил какое-то под-правило для этого свойства? Что здесь происходит?

Спасибо.

Answer 1

position:relative; получает относительное положение от ближайшего расположенного родителя.

Так хитрость заключается в том, чтобы сделать следующий

<div id="#parent" style="position:relative;"> 
    <ul id="navsprite"> 
     <li id="home"><a href="#"></a></li> 
     <li id="prev"><a href="#"></a></li> 
     <li id="next"><a href="#"></a></li> 
    </ul> 
</div> 

В основном position:relative; на #parent ничего не делает, но говорит #navsprite, где относительно позиция из.

Update:

Вы должны иметь высоту явно установить где-то, что position:relative; может коснуться. Вы говорите, что это на 50% сверху ... но вопрос в том, 50% чего? В какой-то момент вы должны дать ему тяжелую ценность, иначе он просто ничего не будет использовать и, похоже, не сработает. Запустите мой фрагмент, чтобы посмотреть.

#navsprite { 
 
    width: 134px; 
 
    position: relative; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -67px; 
 
    margin-top: -22px; 
 
} 
 
#navsprite li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    position: absolute; 
 
    top: 0px; 
 
} 
 
#navsprite a { 
 
    height: 44px; 
 
    display: block; 
 
} 
 
#home { 
 
    left: 0px; 
 
    width: 46px; 
 
    height: 44px; 
 
    background: url(/favicon.ico) 0 0; 
 
} 
 
#prev { 
 
    left: 63px; 
 
    width: 43px; 
 
    height: 44px; 
 
    background: url(/favicon.ico) -47px 0; 
 
} 
 
#next { 
 
    left: 129px; 
 
    width: 43px; 
 
    height: 44px; 
 
    background: url(/favicon.ico) -91px 0; 
 
}

<div id="parent" style="position:relative; height:500px;"> 
 
    <ul id="navsprite"> 
 
    <li id="home"> 
 
     <a href="#"></a> 
 
    </li> 
 
    <li id="prev"> 
 
     <a href="#"></a> 
 
    </li> 
 
    <li id="next"> 
 
     <a href="#"></a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

От MDN articel,

Для относительно расположенных элементов, то top или bottom свойство задает вертикальное смещение от нормального положения и свойство left или right задает горизонтальное смещение.

От CSS2.1 spec,

относительно: Положение блока рассчитывается в соответствии с нормальным потоком (это называется позицией в нормальном потоке). Затем поле смещение относительно его нормального положения.