css3 绝对定位和相对定位

CSS3 中提供了两种定位方式：绝对定位和相对定位。

相对定位是相对于元素当前位置的定位，而绝对定位则是相对于文档的定位。

/* 相对定位 */position: relative;
    top: 20px;
    left: 30px;
    /* 绝对定位 */position: absolute;
    top: 100px;
    left: 200px;
    

在上面的代码示例中，我们可以看到相对定位通过设置元素的 top 和 left 属性来实现位置的调整。而绝对定位则需在 position 属性中设置为 absolute，并设置 top 和 left 属性。

需要注意的是，相对定位对其它元素的位置布局并没有影响，而绝对定位可能会对其它元素的位置造成影响，因为它脱离了文档流。

绝对定位还可以通过设置 right 和 bottom 属性来实现向右和向下定位。

/* 向右和向下定位 */position: absolute;
    right: 100px;
    bottom: 50px;
    

有时候，当文档流中的元素覆盖在绝对定位的元素上时，我们可以通过设置 z-index 属性来调整元素的层次顺序。

/* 调整层次顺序 */position: absolute;
    z-index: 2;
    

最后，需要说明的是，相对定位和绝对定位不是互斥的，也就是说一个元素可以同时设置相对定位和绝对定位。

/* 同时设置相对定位和绝对定位 */position: relative;
    top: 20px;
    position: absolute;
    top: 100px;
    left: 200px;
    

以上就是关于 CSS3 绝对定位和相对定位的相关内容，相信对大家有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！