Я так много читал об абсолютном и относительном позиционировании, но до сих пор не понимаю его должным образом. Каково практическое использование Абсолютного и относительного позиционирования, и когда я должен использовать их в точности?Когда я должен использовать абсолютное и относительное позиционирование?
абсолют: Элемент позиционируется относительно его первого элемента крепления (не статический) предка
относительна: Элемент позиционируется относительно его нормального положения
Это говорит браузеру, что все собирается быть позиционированный должен быть удален из нормального потока документа и будет размещен в точном месте на странице. Он также выводится из обычного потока документа - это не повлияет на то, как элементы, находящиеся перед ним или после него в HTML, размещаются на веб-странице.
Если вы хотите, чтобы позиционировать элемент 10ems из верхней части окна документа, вы должны использовать «сверху» смещение расположить его там с абсолютным позиционированием:
position: absolute;
top: 10em;
Этот элемент будет всегда показывать 10em от верхней части страницы - независимо от того, что еще отображается там в нормальном потоке.
Относительное позиционирование использует те же самые четыре свойства позиционирования, что и абсолютное позиционирование. Но вместо того, чтобы основывать позицию элемента на порте просмотра браузера, он начинается с того, где будет элемент, если он все еще находится в нормальном потоке.
Например, если у вас есть три абзаца на вашей веб-странице, а у третьего есть позиция: относительный стиль, размещенный на нем, позиция будет смещена на основе текущего местоположения - не с исходных сторон порта представления ,
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p style="position: relative;left: 2em;">Paragraph 3.</p>
В приведенном выше примере, третий пункт будет расположен 3em с левой стороны элемента контейнера, но по-прежнему будет ниже первых двух пунктах. Он остался бы в нормальном потоке документа и просто слегка смещен. Если вы изменили его на позицию: absolute; все, что после него будет отображаться поверх него, потому что оно больше не будет в нормальном потоке документа.
Я знаю определение и понимаю, что это такое, я просто спрашиваю, когда я должен их использовать? – Nick
Представьте себе список меню, например, навигация по страницам, для видимого LI установлено значение 'relative', для списка подменю UL' UL' установлено значение absolute. Родитель не заинтересован в высоте абсолютного элемента, но их абсолютное позиционирование позволяет вам отображать их поверх других элементов страницы, которые естественно застревают в позиционировании 'static' или' relative'. Единственная разница между 'absolute' и' fixed' заключается в том, что начальная верхняя/левая позиция абсолютного элемента относится к позиционируемому родительскому элементу, а 'fixed' - к вашим ребрам документа (если изменены верхние/левые значения) –
Короче: всякий раз, когда вы хотите * перекрывающийся элемент * - означает, что вам нужно перейти на 'absolute'. –