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和属性的值。leftrightbottom

    .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 中添加了一个 id 并调用了它movido。我正在尝试应用该属性left而没有结果。

    位置：相对

    通过这个值，我们可以相对于页面的正常流程定位元素。可以说，我们正在定位一个元素，以该元素的正常流程（默认位置）为参考。

    我们可以使用top、和来定位我们的元素，并将元素的默认位置作为参考left。在这种情况下，我将应用上一个示例中的属性，并且 div将从其默认位置向右移动 100 像素。rightbottomleft: 100pxmovido

    .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和。元素不会在页面的正常流程中，如果它是我们要定位的元素的父元素，它将作为参考浏览器窗口或最近定位的元素（具有任何值except ）。rightbottomposition: absolutepositionstatic

    以下是每个示例：

    以浏览器窗口为参考的示例

    在这种情况下，我将以浏览器窗口为参考，将 divmovido向下移动 40 像素，向右移动 50 像素。

    您可以看到 divmovido不在页面的正常流程内，不会影响其余元素的正常流程，因此其他两个元素被定位在一起（不考虑 divmovido在前面留下的空间例如，它在页面的正常流程中）。

    .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以最近的父元素为参考的示例

    在这种情况下，我对带有 id 的 div 使用了与movido上一个示例相同的 CSS，以表明在这种情况下，divmovido引用父元素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浏览器窗口为参考，不尊重定位的父容器。此外，当滚动页面时，定位为 as 的元素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>

    如您所见，divmovido是position: fixed相对于浏览器窗口定位的，无论它是否包含在元素中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; 
}

    在此示例中，您可以上下滚动以查看 divmenu在到达时冻结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. 我认为这个问题-文章需要一个总结：

    静态：默认值。该元素尊重其相对于父元素及其兄弟元素的位置，这决定了它在屏幕上的绘制顺序。

    相对：将元素从其原始位置释放并结合上、下、左和右，允许我们相对于它移动它。其余元素的位置不受影响。

    Absolute：与 relative 相同，但 top、bottom、left 和 right 属性将相对于第一个父元素定位，其位置值不是 static 或 initial，或者如果不存在，则为 HTML 元素。释放的空间被其余的兄弟元素占据。

    固定：与 absolute 相同，只是元素始终相对于 :root 定位，因此它不受任何滚动的影响，甚至不受文档滚动的影响。

    继承：继承直接父级的值。

    Initial：返回初始值，在这种情况下是静态的。

    • 9