Home / Questions / 37930
Accepted
Francisco Romero
Asked: 2020-12-07 18:07:43 +0800 CST 2020-12-07 18:07:43 +0800 CST

В чем разница между позицией: относительной, позицией: абсолютной и позицией: фиксированной?

  • 772

Я знаю, что эти свойства CSS используются для позиционирования элемента на странице.

Однако когда следует использовать каждый из них?

css

2 Answers

  1. Best Answer

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

    Возможные значения, которые может принимать свойство position: static | relative | absolute | fixed | inherit | initial. Поясню, из чего состоит каждый из них:

    положение: статическое

    Это значение, которое элемент принимает по умолчанию для позиционирования самого себя. С этим значением элемент будет соответствовать нормальному потоку страницы, то есть он будет расположен на своем месте и будет игнорировать значения свойств top, left, rightи bottom.

    .rojo{
  height: 100px;
  width: 100px;
  background-color: red;
  border: 2px green solid;
}

#movido{
  left: 100px;
}
    <div class="rojo"></div>
<div id="movido" class="rojo"></div>
<div class="rojo"></div>

    Обратите внимание, что я присвоил идентификатор второму элементу div и назвал его movido. Я пытаюсь применить свойство leftбезрезультатно.

    должность: родственник

    С помощью этого значения мы можем позиционировать элемент относительно нормального потока страницы. Можно сказать, что мы позиционируем элемент, взяв за основу нормальный поток (положение по умолчанию) указанного элемента.

    Мы можем использовать top, leftи rightдля bottomпозиционирования нашего элемента, используя в качестве ссылки положение элемента по умолчанию. В этом случае я собираюсь применить свойство left: 100pxиз предыдущего примера, и div movidoбудет смещен на 100 пикселей вправо от его положения по умолчанию.

    .rojo{
  height: 100px;
  width: 100px;
  background-color: red;
  border: 2px green solid;
}

#movido{
  position: relative;
  left: 100px;
}
    <div class="rojo"></div>
<div id="movido" class="rojo"></div>
<div class="rojo"></div>

    положение: абсолютное

    Это значение также будет принимать значения top, leftи right. bottomЭлемент с position: absoluteне будет находиться в пределах обычного потока страницы и будет принимать в качестве ссылки окно браузера или ближайший позиционированный элемент (который имеет любое значение positionкроме ), если он является родителем элемента, который мы хотим расположить.static

    Вот пример каждого:

    Пример использования окна браузера в качестве эталона

    В этом случае я возьму окно браузера в качестве эталона и сдвину div на movido40 пикселей вниз и на 50 пикселей вправо по отношению к нему.

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

    .rojo{
  height: 100px;
  width: 100px;
  background-color: red;
  border: 2px green solid;
}

#movido{
  position: absolute;
  top: 40px;
  left: 50px;
}
    <div class="rojo"></div>
<div id="movido" class="rojo"></div>
<div class="rojo"></div>

    Пример использования в качестве ссылки родительского элемента с position:relativeближайшим

    В этом случае я использовал тот же CSS для элемента div с идентификатором movido, что и в предыдущем примере, чтобы показать, что в этом случае элемент div movidoссылается на родительский элемент, position: relativeа не на окно браузера (40 пикселей вниз и 50 пикселей вверх). справа от родительского элемента).

    .rojo{
  height: 100px;
  width: 100px;
  background-color: red;
  border: 2px green solid;
}

#relativo{
  position: relative;
}

#movido{
  position: absolute;
  top: 40px;
  left: 50px;
}
    <div class="rojo"></div>
<div id="relativo" class="rojo">
  <div id="movido" class="rojo"></div>
</div>

    положение: фиксированное

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

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

    Поскольку картинка стоит тысячи слов, взяв за основу последний пример раздела position: absolute:

    .rojo{
  height: 100px;
  width: 100px;
  background-color: red;
  border: 2px green solid;
}

#primerDiv{
  height: 2000px
}

#relativo{
  position: relative;
}

#movido{
  position: fixed;
  top: 40px;
  left: 50px;
}
    <div id="primerDiv" class="rojo"></div>
<div id="relativo" class="rojo">
  <div id="movido" class="rojo"></div>
</div>

    Как видите, элемент div movidoпозиционируется position: fixedотносительно окна браузера независимо от того, содержится ли он в элементе with position: relativeили прокручивается ли страница.

    должность: присущая

    Собственно свойство positionсо значением inheritдействует так же, как и остальные свойства, которые могут получить это значение, оно наследует значение для этого свойства от родительского элемента.

    позиция: начало

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

    положение: липкое

    Это относительно новое значение для этого свойства.

    Используя это значение, элемент действует так, как если бы он был позиционирован со значением relative, пока не будет достигнуто пороговое значение смещения (в самом элементе или в родительском элементе), после чего элемент становится позиционированным, как если бы он был позиционирован со значением fixed.

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

    Что-то такое:

    +----------------------------------------------+
|                  LOGO                        |
|                                              |
+----------------------------------------------+
|               MENÚ RELATIVO                  |
+----------------------------------------------+
|                                              |
|                                              |
|                 CONTENIDO                    |
|                                              |
|                                              |
|                                              |
+----------------------------------------------+

    А мы хотим, чтобы при прокрутке и меню уже не помещалось на экране (то есть значение свойства topменьше 0), меню оставалось фиксированным вверху экрана.

    Что-то такое:

    +----------------------------------------------+
|                  MENÚ FIJO                   |
+----------------------------------------------+
|                                              |
|                                              |
|                  CONTENIDO                   |
|                                              |
|                                              |
|                                              |
+----------------------------------------------+

    Для этого мы будем использовать значение sticky, так как оно сделает всю работу за нас без необходимости использования Javascript.

    Использование будет таким:

    #menu{
   position: sticky; /* Posicionamos el elemento con el valor sticky */
   /* Indicamos el umbral de desplazamiento con el cual el elemento pasará de comportarse 
   como position: relative a position: fixed, es decir, cuando el elemento tome el valor de
   top: 0 con respecto a la pantalla del navegador, este cambiará su comportamiento.*/
   top: 0; 
}

    В этом примере вы можете прокручивать вверх и вниз, чтобы увидеть, что div menuзависает, когда достигает top: 0.

    #marca{
  height: 50px;
  width: 100%;
  background-color: green;
  text-align: center;
}

#marca img{
  height: 100%;
}

#menu{
   position: sticky;
   top: 0; 
   height: 100px;
   width: 100%;
   background-color: red;
}

#contenido{
   height: 1200px;
   width: 100%;
   background-color: yellow;
}
    <div id="marca">
  <img src="https://media.licdn.com/mpr/mpr/shrinknp_800_800/AAEAAQAAAAAAAARpAAAAJDMzZGRhNGMwLTU4YmMtNDdmZi1hMjU5LWIwYTViMjdlNWJmOQ.png">
</div>

<div id="menu"></div>
<div id="contenido">CONTENIDO</div>

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

    Посмотреть браузеры, поддерживающие это свойство , можно здесь .

    БОНУС: типичные примеры.

    Вот несколько типичных примеров позиционирования (центрирования).

    1.- Центрировать div по горизонтали на странице (с помощью position: relative)

    #centrado{
  position: relative;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
    <div id="centrado"></div>

    2.- Отцентрируйте div по горизонтали на странице (с помощью position: absolute)

    #centrado{
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
    <div id="centrado"></div>

    3.- Центрировать div по горизонтали на странице (со position: staticзначением по умолчанию)

    #centrado{
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
    <div id="centrado"></div>

    4.- Центрировать div по горизонтали внутри другого div

    #contenedor{
  position: relative;
  height: 300px;
  width: 300px;
  background-color: green;
}

#centrado{
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
    <div id="contenedor">
    <div id="centrado"></div>
</div>

    5.- Центрировать div по горизонтали и вертикали на странице

    #centrado{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
    <div id="centrado"></div>

    6.- Центрировать div по вертикали и горизонтали внутри другого div

    #contenedor{
  position: relative;
  height: 300px;
  width: 300px;
  background-color: green;
}

#centrado{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
    <div id="contenedor">
   <div id="centrado"></div>
</div>

    • 111

  2. Я думаю, что этот вопрос-статья нуждается в резюме:

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

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

    Абсолютный: То же, что и относительный, но атрибуты top, bottom, left и right будут позиционировать его относительно первого родительского элемента со значением позиции, отличным от статического или начального, или, если нет, элемента HTML. Освобожденное пространство становится занятым остальными одноуровневыми элементами.

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

    Наследовать: наследует значение прямого родителя.

    Исходное: возвращает начальное значение, которое в данном случае является статическим.

    • 9