Question

简述css定位是如何实现的？

Answer 1

CSS中，定位是通过定位属性来实现的，包括三种常用的定位：相对定位、绝对定位和固定定位。
1. 相对定位（position: relative）：相对定位是相对于元素本身原有位置的定位方式。当元素使用相对定位时，可以通过 top、bottom、left、right 属性来设置元素相对于原有位置的偏移量。
2. 绝对定位（position: absolute）：绝对定位是相对于最近的非 static 定位祖先元素或 body 元素的定位方式。元素使用绝对定位时，可以通过 top、bottom、left、right 属性来设置元素相对于定位祖先元素的偏移量。
3. 固定定位（position: fixed）：固定定位是相对于浏览器窗口的定位方式。元素使用固定定位时，可以通过 top、bottom、left、right 属性来设置元素与浏览器窗口边缘的距离。
当元素的 position 属性被设置为相对定位、绝对定位或固定定位时，元素会脱离正常的文档流布局，会影响后续元素的布局。此时我们可以使用 z-index 属性来控制元素在 z 轴方向上的叠放顺序。
需要注意的是，元素的定位取决于它的父级元素，所以在使用定位时，需要确保元素的父级元素也被设置了正确的定位属性。