CSS 布局 - 位置属性

position 属性指定用于元素的定位方法的类型 (static, relative, fixed 或者 absolute).

位置属性

position 属性指定用于元素的定位方法的类型。

有四个不同的位置值:

• static
• relative
• fixed
• absolute

然后使用上、下、左、右属性定位元素。但是，除非首先设置position属性，否则这些属性将不起作用。 他们的位置值不同工作方式也不相同。

position: static;

HTML元素的默认设置静态。

静态定位元素不受上、下、左、右属性的影响。

一个元素使用 position: static; 不以任何特殊方式定位; 它总是根据页面的正常流程定位:

下面是一个CSS应用

div.static {
  position: static;
  border: 3px solid #73AD21;
}

让我试试

position: relative;

一个元素使用position: relative;相对于其正常位置定位。

设置相对位置元素的上、右、左、左属性将使其偏离正常位置. 其他内容将不进行调整，以适应其他元素留下的差距。

下面是一个CSS应用：

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

让我试试

position: fixed;

元素使用 position: fixed; 位于相对于视口, 这意味着它总是停留在同一个地方，即使页面滚动。 顶部、右、底部和左属性用于定位元素。

一个固定的元素不会留下一个空白的页面，它通常已经定位。

注意页面右下角的固定元素。这里是CSS应用：

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

让我试试

position: absolute;

使用 position: absolute;根据就近的父元素来定位（而不是相对设置的视口，如固定）。

但是，如果一个绝对定位的元素没有定位的父元素，它使用body，并且随着页面滚动而移动。

下面是一个实例:

下面是一个CSS实例：

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

让我试试

层叠元素

当元素定位时，它们可以重叠其他元素.

z-index 属性指定元素的堆栈顺序(哪些元素应该放在前面，哪些放在后面).

一个元素可以有一个正或负的堆栈顺序:

这是一个标题

因为这个图片z-index 是 -1, 所以它被放在文本的后面

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

让我试试

一个元素具有更大的堆栈顺序总是在一个元素的堆栈顺序较低的前面。

注意：如果两定位元素重叠没有z-index指定元素定位，最后在HTML代码将显示在顶部。

在图像中定位文本

如何在图像上定位文本：

实例

左下角

左上角

右上角

右下角

中心

你试试:

左上角 » 右上角 » 左下角 » 右下角 » 中心 »

</div>

---

所有的CSS定位属性

属性	描述
bottom	设置定位框的底边边距
clip	剪辑绝对定位元素
cursor	指定要显示的光标的类型
left	设置定位框的左边边距
overflow	指定内容溢出元素框时会发生什么
overflow-x	指定内容的左/右边，如果它溢出元素的内容区域
overflow-y	指定内容的顶部/底部边缘，如果它溢出元素的内容区域
position	指定元素的定位类型
right	设置定位框的右边距边
top	设置定位框的顶部边距边缘
z-index	设置元素的堆栈顺序