Относительная позиция против абсолютной?

В чем разница между position: relativeи position: absoluteв CSS? И когда вы должны использовать что?

Абсолютное CSS-позиционирование

position: absolute;

Абсолютное позиционирование легче всего понять. Вы начинаете со positionсвойства CSS :

position: absolute;

Это говорит браузеру, что все, что будет позиционироваться, должно быть удалено из обычного потока документа и будет размещено в точном месте на странице. Это не повлияет на то, как элементы до или после него в HTML будут размещены на веб-странице, однако это будет зависеть от расположения его родителей, если вы не переопределите его.

Если вы хотите расположить элемент на расстоянии 10 пикселей от верхней части окна документа, вы должны использовать topсмещение к positionнему с absoluteпозиционированием:

position: absolute;
top: 10px;

Этот элемент будет всегда отображаться 10pxв верхней части страницы независимо от того, какой контент проходит через, под или над элементом (визуально).

Четыре свойства позиционирования:

1. top
2. right
3. bottom
4. left

Чтобы использовать их, вы должны думать о них как о свойствах смещения. Другими словами, позиционированный элемент right: 2pxне перемещается вправо 2px. Его правая сторона смещена относительно правой стороны окна (или его родительского положения) 2px. То же самое верно и для остальных трех.

Относительное позиционирование

position: relative;

Относительное позиционирование использует те же четыре свойства absoluteпозиционирования, что и позиционирование. Но вместо того, чтобы основывать позицию элемента на порте просмотра браузера, он начинается с того места, где он был бы, если бы он все еще находился в нормальном потоке .

Например, если на вашей веб-странице есть три абзаца, а на третьем размещен position: relativeстиль, его позиция будет смещена в зависимости от текущего местоположения, а не от исходных сторон порта просмотра.

Пункт 1.

Параграф 2

Ноты:

• по умолчанию widthдля элемента, который является абсолютно позиционированным, является ширина содержимого внутри него, в отличие от элемента, который относительно позиционирован, где по умолчанию widthнаходится 100%пространство, которое он может заполнить.

• У вас могут быть элементы, которые перекрываются с абсолютно позиционированными элементами, тогда как вы не можете сделать это с относительно позиционированными элементами (изначально, то есть без использования отрицательных полей / позиционирования)

много вытащил из: этот ресурс

Как «относительное», так и «абсолютное» позиционирование действительно относительны, только в разных рамках. «Абсолютное» позиционирование относительно положения другого, вмещающего элемента. «Относительное» позиционирование относится к позиции, которую сам элемент имел бы без позиционирования.

Это зависит от ваших потребностей и целей, которые вы используете. «Относительная» позиция подходит, когда вы хотите сместить элемент из позиции, которую он в противном случае имел бы в потоке элементов, например, чтобы некоторые символы появлялись в верхнем индексе. «Абсолютное» позиционирование подходит для размещения элемента в некоторой системе координат, заданной другим элементом, например, для «наложения» изображения на некоторый текст.

В качестве специального, используйте «относительное» позиционирование без смещения (просто настройка position: relative), чтобы сделать элемент системой отсчета, чтобы вы могли использовать «абсолютное» позиционирование для элементов, которые находятся внутри него (в разметке).

Следует также отметить, что если вы хотите, чтобы абсолютный элемент был ограничен родительским элементом, вам нужно установить относительную позицию родительского элемента. Это сохранит дочерний элемент, содержащийся в родительском элементе, и он не будет «относительным» ко всему окну.

Я написал пост в блоге, который дает простой пример, который создает следующий эффект:

У этого есть зеленый div, который абсолютно расположен к нижней части родительского желтого div.

1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/

Относительная позиция:

Если указать положение: относительное, то вы можете использовать верх или низ, а также влево или вправо, чтобы переместить элемент относительно того места, где он обычно находится в документе.

Положение Абсолют:

Когда вы указываете position: absolute, элемент удаляется из документа и размещается именно там, где вы говорите, чтобы он шел.

Вот хороший учебник http://www.barelyfitz.com/screencast/html-training/css/positioning/ с примером использования обеих позиций с относительным и абсолютным позициями.

Относительно: Относительно его текущей позиции, но может быть перемещено. Или ОТНОСИТЕЛЬНО позиционированный элемент позиционируется относительно СЕБЯ.

Абсолют: элемент ABSOLUTE позиционируется относительно ЭТОГО БЛИЖАЙШЕГО ПОЗИЦИОНИРОВАННОГО РОДИТЕЛЯ. если он присутствует, то он работает как фиксированный ..... относительно окна.

<div style="position:relative"> <!--2nd parent div-->
    <div>   <!--1st parent div-->
        <div style="position:absolute;left:10px;....."> <!--Middle div-->
          Md. Arif
       </div>
    </div>
</div>

Здесь divпозиция второго родителя является относительной, поэтому середина divизменит свою позицию относительно второго родителя div. Если divпозиция первого родителя будет относительной, то середина divизменит свою позицию относительно первого родителя div. подробности

Выкладываю ответ, так как моей репутации недостаточно, чтобы комментировать. Но не смотрите на это как на ответ, просто дополнительная информация, так как у меня были некоторые проблемы как с нижним колонтитулом, так и с позиционированием.

При настройке страницы, чтобы мой нижний колонтитул всегда оставался внизу с абсолютным положением, а основной контейнер / обертка - с относительным положением.

Затем я обнаружил некоторые проблемы с моим текстовым содержимым и меню внутри того же содержимого (белая часть страницы между верхним и нижним колонтитулом), при установке их в абсолютный нижний колонтитул больше не остается внизу.

Публикация - это, как вы говорите, сложная тема.

Мое решение относительно содержимого, которое я хотел разместить в «абсолютном» положении на моей веб-странице, а не отталкивать его в сторону, например, при открытии раскрывающегося меню, заключалось в том, чтобы фактически дать ему относительную позицию и поместить его на 35 пунктов ниже моего раскрывающегося списка. меню. (35em - высота моего выпадающего меню, когда оно полностью расширено)

Затем, Top: -35em, для содержимого, которое раньше было сдвинуто в сторону. И затем добавление поля-дно: -35em. Таким образом, контент находится «под» моим выпадающим меню, но визуально он находится рядом с моим выпадающим меню! И пустое пространство внизу до нижнего колонтитула, с полем 10em, как это было до начала игры с этим. Так что мое решение этого было так:

 html, body {
    margin:0;
    padding:0;
    height:100%;

}
h1 {
    margin:0;
}
    #webpage {
    position:relative;
    min-height:100%;
    margin:0;
    overflow:auto;
}
     #header {
    height:5em;
    width:100%;
    padding:0;
    margin:0;
}
     #text {
    position:relative;
   margin-bottom:-32em;
    padding-top:2em;
    padding-right:2em;
    padding-bottom:10em;
    background-repeat:no-repeat;
    width:70%;
    padding-left:auto;
    margin-left:auto;
    margin-right:auto;
    right:10em;
    float:right;
    top:-32em;
      }
#dropdown {

position:absolute;
    left:0;
    width:20%;
    clear:both;
    display:block;
    position:relative;
    top:1em;
    height:35em;

}
    #footer {
    position:absolute;
    width:100%;
    right:0;
    bottom:0;
    height:5em;
    margin:0;
     margin-top:5em;
}

Я вижу, что на ваш вопрос получен хороший ответ, но после многих неприятностей я обнаружил, что это очень хорошее решение и способ лучше понять, как работает позиционирование. Когда я размещаю текстовое содержимое под раскрывающимся меню, оно не ' т толкать мой текст в сторону. Если я изменил текст на абсолютную позицию, нижний колонтитул не остался на месте. Поскольку я могу поверить, что это проблема для большего количества людей, чем для меня, я добавляю это здесь. Что на самом деле происходит, так это то, что я помещаю текст, 35ems, ниже моего выпадающего меню.

Затем я визуально поместил его прямо рядом друг с другом, с относительным положением и вершиной: -35em; и выравнивая огромное пространство внизу с полем: -35em;

отрицательные значения иногда недооцениваются, очень хорошая функциональность, когда лучше понимаешь эти позиции!

Естественно, фиксированная позиция также казалась логикой для моего нижнего колонтитула, но я действительно хочу, чтобы нижний колонтитул находился ниже области просмотра, если текст или содержимое длиннее области просмотра. И оставаться внизу, если на странице мало контента.

Это setupp исправило это очень хорошо, и не забывайте использовать «em», а не «px» для более плавного / динамического макета страницы! :)

(могут быть и лучшие решения, но это работает для меня кроссплатформенность, а также устройства).

Относительный против Абсолюта:

• Разница: относительно себя, относительно ближайшего предка.
• Разница: другие элементы вокруг него чтят его старое существование, другие элементы вокруг него НЕ чтят его старое существование.
• Сходство: другие элементы вокруг него НЕ чтят его новое существование, другие элементы вокруг него НЕ чтят его новое существование.

Давайте обсудим сценарий, чтобы объяснить разницу между абсолютным и относительным.

Внутри элемента body говорят, что у вас есть элемент заголовка, высота которого составляет 95% от высоты просмотра, т.е. 95vh. Внутри этого контейнера вы поместили изображение и уменьшили его непрозрачность до 0,5. А теперь вы хотите разместить логотип в верхнем левом углу. Я надеюсь, что вы поняли сценарий. Таким образом, у вас будет более светлое изображение в разделе заголовка с логотипом сверху в указанном месте.

Но прежде чем начать это, я установил margin и padding в 0, как это

*{
   margin:0px;
   padding:0px;
   box-sizing: border-box; 
}

Это гарантирует отсутствие полей по умолчанию и применение отступов к элементам.

Таким образом, вы можете выполнить ваши требования двумя способами.

Первый путь

• Вы даете класс изображения, скажем, логотип.

• в ксс ты пишешь

  .logo{ float:left; margin-top:40px; margin-left:40px; }

• это поместило логотип на 40 пикселей сверху и слева от родительского элемента, который является заголовком. Изображение будет выглядеть так, как если бы оно было размещено по желанию.

Но, мой друг, это плохой дизайн, поскольку вы помещаете изображение, которое вы излишне потребляли, так много места вокруг, предоставляя ему некоторый запас, когда он не требуется. Все, что вам нужно, это поместить изображение в это место. Вы справились с этим, обустроив поля вокруг. Поле занимало пространство и толкало контент глубже, создавая впечатление, что оно находится именно там, где вы хотели. Надеюсь, вы поняли проблему, обойдя ее так. Вы занимаете больше места, чем требуется, чтобы разместить только изображение в нужном месте.

Теперь давайте попробуем другой подход.

Второй путь

• изображение с классом логотипа находится внутри элемента заголовка с, скажем, классом заголовка. Таким образом, родительский класс - это заголовок, а дочерний класс - это логотип, как и раньше.

• вы устанавливаете свойство position класса заголовка как относительное

  .header{ position: relative; }

• Затем вы добавили следующие свойства в класс логотипа

  .logo{ position:absolute; top:40px; left:40px }

Вот и ты. Вы разместили изображение в том же месте. Не будет видимой разницы в позиционировании невооруженным глазом между первым заходом и вторым заходом. Но если вы осмотрите элемент изображения, вы обнаружите, что он не занял лишнего пространства. Он занимает точно такую ​​же площадь, как и его собственная ширина и высота.

Так как это возможно? Я сказал классу с изображением логотипа, что вы будете размещены относительно класса заголовка, поскольку вы являетесь потомком этого класса, и что я специально упомянул его положение как относительное . Так что любой его дочерний элемент будет расположен относительно его верхнего левого угла. И что Ваша позиция должна быть зафиксирована внутри этого родительского элемента. так вам дано абсолют, И что вам нужно немного переместиться сверху и влево в положение, в котором я хочу, чтобы вы были. Следовательно, вам дают свойство top и left с 40px в качестве значения. Таким образом, вы будете размещены только относительно вашего родителя. Поэтому, если завтра я переместу вашего родителя вверх или вниз или просто куда-нибудь, вы всегда будете на 40px вверху и слева от верхнего левого угла вашего родительского заголовка. Таким образом, ваша позиция фиксируется внутри вашего родителя, независимо от того, будет ли позиция вашего родителя фиксированной или нет в будущем (так как она не абсолютна, как вы).

Так что используйте относительный и абсолютный для родителя и ребенка соответственно. Во-вторых, используйте его, когда вы хотите разместить дочерний элемент только в каком-то месте внутри его родительского элемента. Не используйте наполнители, такие как поля, чтобы принудительно толкнуть его. Укажите родительское относительное значение и дочернее, которое вы хотите переместить, абсолютное значение. Укажите свойство top, left, bottom или right для дочернего класса, чтобы поместить его в родительский класс где угодно.

Спасибо.

Marco Pellicciotta: Положение элемента внутри другого элемента может быть относительным или абсолютным относительно элемента, внутри которого он находится.

Если вам нужно расположить элемент в окне браузера, лучше всего использовать position: fixed