CSS定位

CSS定位是用来控制元素在页面上的位置和排列方式的技术。CSS有三种基本的定位机制：普通流、浮动流、定位流，其中定位流包括相对定位、绝对定位和固定定位。以下是CSS定位的总结：

• 普通流：元素默认从上至下或者从左至右的排列顺序。
• 浮动流：添加了浮动的元素。
• 定位流：添加了定位的元素，包括相对定位、绝对定位和固定定位。

定位机制的区别：

• 相对定位：以元素原来的位置为基准，根据设置的偏移量进行定位，元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。
• 绝对定位：以离元素最近的设置了绝对或相对定位的父元素为基准，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位，元素脱离了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。
• 固定定位：以浏览器窗口为基准，固定在屏幕上的某个位置，不随页面滚动而滚动。

定位的属性：

• position：用于设置元素的定位方式，其属性值包括static、relative、absolute和fixed。
• top、right、bottom、left：用于设置元素相对于其定位父元素的偏移量。
• z-index：用于设置元素的层级，层级高的元素会覆盖在层级低的元素之上。

实现绝对定位盒子的水平垂直居中可以通过以下方式实现：

.box {    
    position: absolute;    
    left: 50%;    
    margin-left: -100px;    
    top: 50%;    
    margin-top: -100px;    
    width: 200px;    
    height: 200px;    
    background-color: red;
}

定位的使用场景：

• 相对定位：用于微调元素的位置，使其相对于原来的位置移动一定的距离，但不影响其他元素的位置。
• 绝对定位：用于将元素定位在其父元素的某个位置，可以实现元素的居中、遮罩等效果。
• 固定定位：用于将元素固定在屏幕的某个位置，不随页面滚动而滚动，常用于实现导航栏、返回顶部等功能。

层级问题是CSS定位中需要注意的问题，其规则如下：

• 标准流盒子低于浮动的盒子，浮动的盒子又低于定位的盒子。
• 定位高于浮动，浮动高于标准流。
• 用法：必须有定位（除去static之外），给定z-index的值为层级的值（不给默认为0）。
• 层级为0的盒子，也比标准流和浮动高。
• 层级为负数的盒子，比标准流和浮动低。
• 层级不取小数。
• 层级一样，后面的盒子比前面的层级高。
• 浮动或者标准流的盒子，后面的盒子比前面的层级高。
• absolute是不占位置的，relative是占位的。而层级的高低，是和占不占位置没有关系的。