CSS教程: CSS定位属性

什么是CSS定位属性？

CSS定位属性用于控制HTML元素在网页中的位置，包括相对定位、绝对定位和固定定位。定位属性能够让我们控制元素在网页上出现的位置、大小、层级关系以及叠放顺序等。

相对定位

相对定位是一种基于元素原来位置进行位置调整的定位方式，通过调整元素的上下左右边距来完成位置调整，相对定位不会对文档流产生任何影响。

下面是一个相对定位的实例：

<div style="position: relative; left: 100px; top: 50px;">
   <p>This paragraph has a relative position</p>
</div>

在这个实例中，我们在<div>元素上设置了相对定位，并将left属性设置为100px，表示它要相对于原来的位置向右移动100px。top属性被设置为50px，表示它要相对于原来的位置向下移动50px。

绝对定位

绝对定位是基于元素的父元素或根元素进行位置调整的一种定位方式，通过指定元素的位置来进行位置调整。绝对定位会使元素脱离文档流，不占用在标准流中的位置。

下面是一个绝对定位的实例：

<div style="position: relative;">
   <img src="example.jpg" style="position: absolute; left: 100px; top: 50px;">
</div>

在这个实例中，我们在<div>元素上设置了相对定位，接着在<img>元素上设置了绝对定位，并将left属性设置为100px，表示它要距离父元素左边界100px。top属性被设置为50px，表示它要距离父元素上边界50px。

固定定位

固定定位会使元素的位置保持不变，即使页面滚动。它是一种绝对定位的变种。

下面是一个固定定位的实例：

<div style="position: fixed; top: 0; left: 0;">
   <p>This is a fixed position element</p>
</div>

在这个实例中，我们在一个<div>元素上设置固定定位，将top属性和left属性设置为0，表示它要固定在页面的左上角。

结论

CSS定位属性能够使网页中的元素在页面上表现出多种位置和大小，其中常见的定位方式为：相对定位、绝对定位和固定定位。定位属性的正确使用能够提升网页风格，使元素更为美观。