Позиция Relative vs Position Absolute?

Ответ 1

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

position: absolute;

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

position: absolute;

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

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

position: absolute;
top: 10px;

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

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

• top
• right
• bottom
• left

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

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

position: relative;

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

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

Пункт 1.

Пункт 2.

Примечания:

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

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

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

Ответ 2

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

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

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

Ответ 3

Относительное положение:

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

Абсолютная позиция:

Когда вы указываете позицию: абсолютный, элемент удаляется из документа и помещается именно там, где вы говорите ему, чтобы идти.

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

Ответ 4

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

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

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

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

Ответ 5

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

Абсолютный: Позиционированный элемент ABSOLUTE позиционируется относительно IT CLOSEST POSITIONED PARENT. если он присутствует, то он работает как фиксированный..... относительно окна.

<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. Если 1-я родительская позиция div будет относительной, то средний div изменит ее положение относительно 1-го родителя div. Подробности

Ответ 6

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

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

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

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

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

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

 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, ниже моего падения.

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

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

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

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

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

Ответ 7

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

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