Может ли кто-нибудь сказать мне разницу между style = "position:absolute" и style = "position:relative" и как они отличаются в случае, если я добавлю его в элементы div/span/input?
Я использую absolute прямо сейчас, но я также хочу изучить relative. Как это изменит позиционирование?
Абсолютное позиционирование означает, что элемент полностью выведен из нормального потока макета страницы. Что касается остальных элементов на странице, абсолютно позиционируемый элемент просто не существует. Сам элемент затем рисуется отдельно, как бы "сверху" всего остального, в позиции, которую вы указываете с помощью атрибутов left, right, top and bottom.
Используя позицию, указанную с этими атрибутами, элемент затем помещается в эту позицию в пределах своего последнего элемента-предка, у которого есть атрибут позиции, кроме static (элементы страницы по умолчанию статичны, если не указан атрибут позиции) или тело документа (окно просмотра браузера), если такой предок не существует.
Например, если у меня был этот код:
<body>
<div style="position:absolute; left: 20px; top: 20px;"></div>
</body>
... <div> будет располагаться 20px от верхней части окна просмотра браузера и 20px от левого края того же самого.
Однако, если бы я сделал что-то вроде этого:
<div id="outer" style="position:relative">
<div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
</div>
... тогда div inner будет располагаться 20px от вершины outer div и 20px от левого края того же самого, потому что div outer не расположен с position:static, потому что мы явно установили его для использования position:relative.
Относительное позиционирование, с другой стороны, похоже на отсутствие позиционирования вообще, но атрибуты left, right, top and bottom "подталкивают" элемент к их нормальной компоновке. Остальные элементы на странице по-прежнему выкладываются, как если бы элемент находился в нормальном месте.
Например, если у меня был этот код:
<span>Span1</span>
<span>Span2</span>
<span>Span3</span>
... тогда все три элемента <span> будут сидеть рядом друг с другом без перекрытия.
Если я устанавливаю второй <span> для использования относительного позиционирования, например:
<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>
... тогда Span2 будет перекрывать правую часть Span1 на 5px. Span1 и Span3 будут сидеть в том же месте, что и в первом примере, оставляя зазор в 5 пикселей между правой стороной Span2 и левой стороной Span3.
Надеюсь, что это немного прояснит ситуацию.
Относительное позиционирование: Элемент создает свои собственные оси координат со смещением относительно оси координат области просмотра. Это часть потока документов, но смещена.
Абсолютное позиционирование: Элемент ищет ближайшие доступные координатные оси среди своих родительских элементов. Затем элемент позиционируется путем указания смещений от этой координатной оси. Он удаляется из документа нормального потока.
Вы определенно захотите проверить эту статью о позиционировании из "A List Apart". Помог демистифицировать CSS позиционирование (которое до этой статьи показалось мне безумным).
С помощью позиционирования CSS вы можете разместить элемент именно там, где вы хотите, на своей странице.
Когда вы собираетесь использовать позиционирование CSS, первое, что вам нужно сделать, это использовать позицию свойства CSS, чтобы сообщить браузеру, собираетесь ли вы использовать абсолютное или относительное позиционирование.
Оба Postion имеют разные функции. В Css После того, как вы установили Position, вы можете использовать атрибуты top, right, bottom, left.
Абсолютная позиция
Элемент абсолютной позиции позиционируется относительно первого родительского элемента, который имеет позицию, отличную от статической.
Относительная позиция
Относительно позиционированный элемент позиционируется относительно его нормального положения.
Чтобы позиционировать элемент относительно, позиция свойства устанавливается как относительная. Разница между абсолютным и относительным позиционированием заключается в том, как рассчитывается позиция.
Хорошо, очень очевидный ответ здесь... в основном относительная позиция относительно предыдущего элемента или окна, в то время как абсолютные не заботятся о других элементах, если они не родительские, если вы используете top и left...
Посмотрите на пример, который я создаю для вас, чтобы показать различия...
Также вы можете увидеть это в действии, используя css, который я создаю для вас, вы можете увидеть, как ведут себя абсолютные и относительные позиции:
.parent {
display: inline-block;
width: 180px;
height: 160px;
border: 1px solid black;
}
.black {
position: relative;
width: 100px;
height: 30px;
margin: 5px;
border: 1px solid black;
}
.red {
width: 100px;
height: 30px;
margin: 5px;
top: 16px;
background: red;
border: 1px solid red;
}
.red-1 {
position: relative;
}
.red-2 {
position: absolute;
}<div class="parent">
<div class="black">
</div>
<div class="red red-1">
</div>
</div>
<div class="parent">
<div class="black">
</div>
<div class="red red-2">
</div>
</div>Абсолютное позиционирование основано на согласованиях дисплея:
position:absolute;
top:0px;
left:0px;
^ помещает элемент в верхнем левом углу окна.
Относительное положение относительно места размещения элемента:
position:relative;
top:1px;
left:1px;
^ помещает элемент 1px вниз и 1px слева от места, где он первоначально сидел:)
Родственник:
Элемент с position: relative; позиционируется относительно своего нормального положения.
Если вы не добавите атрибуты позиционирования (верхний, левый, нижний или правый) в относительный элемент, это никак не повлияет на его позиционирование. Он будет вести себя точно как position: static элемент.
Но если вы добавите какой-либо другой атрибут позиционирования, скажем, top: 10px;, он сместит свою позицию на 10 пикселей ниже, чем обычно.
На элемент с таким типом позиционирования влияют другие элементы, и он сам также влияет на другие.
Абсолютные:
Элемент с position: absolute; позволяет разместить любой элемент именно там, где вы хотите. Вы используете атрибуты позиционирования сверху, слева, снизу. и право установить местоположение.
Он размещен относительно ближайшего нестатического предка. Если такого контейнера нет, он помещается относительно самой страницы.
Он удаляется из обычного потока элементов на странице.
На элемент с таким типом позиционирования не влияют другие элементы, а также он не влияет на поток других элементов.
Смотрите этот очевидный пример для большей ясности. https://codepen.io/nyctophiliac/pen/BJMqjX
Когда вы собираетесь использовать позиционирование CSS, первое, что вам нужно сделать, это использовать позицию свойства CSS, чтобы сообщить браузеру, если вы собираетесь использовать абсолютное или относительное позиционирование.
Оба Postion имеют разные функции. В Css. Когда вы устанавливаете позицию, вы можете использовать атрибуты верхнего, правого, нижнего и левого.
Абсолютная позиция
Элемент абсолютной позиции позиционируется относительно первого родительского элемента, который имеет положение, отличное от статического.
Относительная позиция
Относительный позиционный элемент расположен относительно его нормального положения.
Чтобы позиционировать элемент относительно, позиция свойства устанавливается как относительная. Разница между абсолютным и относительным позиционированием заключается в том, как вычисляется позиция.
Абсолют помещает объект (div, span и т.д.) в абсолютное принудительное местоположение (обычно определяется в пикселях), а относительное будет располагать определенную величину от места, где это место обычно будет. Например:
положение: относительная; слева: -20px;
Возможно, исчезнет левая часть текста, если она находится в пределах 20 пикселей к левому краю экрана.
position: absolute можно разместить где угодно и оставить там, например, 0,0.
position: relative размещается со смещением относительно места, в котором он изначально размещен в браузере.