css3位置属性

CSS3新增了很多位置属性，这些属性可以帮我们更好地控制HTML元素在网页中的位置。下面我们来一一了解它们：

position: static/relative/absolute/fixed/sticky;

position 属性定义了元素的定位类型。

静态定位（默认）：position: static;

相对定位：position: relative;
元素会相对自己原有的位置进行移动，但不会脱离文本流。可以与 top、right、bottom、left 配合使用。

绝对定位：position: absolute;
元素会相对于离它最近的已定位（position不为 static）的祖先元素进行移动。如果没有已定位的祖先元素，则相对于 body 元素。会脱离文本流。可以与 top、right、bottom、left 配合使用。

固定定位：position: fixed;
元素会相对于浏览器窗口进行移动，不会随着滚动而移动，常用于固定头部或侧边栏等。可以与 top、right、bottom、left 配合使用。

粘性定位：position:sticky;
IE浏览器不支持，元素在跨越特定阈值前为相对定位，之后为固定定位，实现吸附效果。需要设置 top、right、bottom、left 至少一个值。

z-index: number;

z-index 属性定义了元素的层级关系，数值越大，元素越靠上。

top: length/percentage/auto;
right: length/percentage/auto;
bottom: length/percentage/auto;
left: length/percentage/auto;

top、right、bottom、left 属性决定了元素离父容器的距离，可以是具体的像素值，也可以是百分比。

总结：position、z-index 和 top、right、bottom、left 属性可以一起使用，辅助元素的定位，使其在页面中呈现出更好的视觉效果。

查看更多关于css3位置属性的详细内容...