一篇文章详细介绍CSS的position定位

ゝ一世哀愁。 2022-09-28 11:46 125阅读 0赞

CSS有三种定位机制：普通流（包括相对定位relative）、浮动、绝对定位absolute（包括固定定位fixed），其中浮动和绝对定位脱离了正常文本流。在CSS的定位中，position是必不可少的，CSS中position有四种不同的定位方法：static定位、Fixed 定位、relative定位和absolute定位。

position定位可以使用偏移属性 top/bottom/right/left: value;来实现元素框位置的偏移，使用z-index: value;来确定堆叠的顺序。

一. position的四种定位

1.   Static 定位：HTML元素的默认值，即没有定位，元素出现在正常的文档流中。静态定位的元素不会受到top, bottom, left, right影响。
2.  Fixed 定位：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed定位使元素脱离了正常的文档流，因此不占据空间。  
    
3.  Relative相对 定位：相对定位元素的定位是相对其原本的正常位置，元素原本所占的空间仍保留，元素框会相对它原来的位置偏移某个距离。相对定位经常被用来作为绝对定位元素的容器块。即将某个元素a设置为position：relative；另一个元素b设置为position：absolute；而且a是离b元素最近的已定位父元素，则b元素就可以相对于a元素进行定位。  
    
4.  absolute绝对定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

二. 堆叠顺序：一旦修改了元素的定位方式，则元素可能会发生堆叠，可以使用z-index属性来控制元素框出现的重叠顺序。  
   z-index 属性：  
      1. 值为数值: 数值越大表示堆叠顺序更高，即离用户更近  
      2.  拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，即元素的显示会接近页面表面  
      3. 可以设置为负值: 表示离用户更远，比如背景图片的z-index值总是要比文字小，这样文字才能显露人前。

三. 几种定位的居中方法

1. 因为relative相对定位的元素在正常的文档流中，所以使用margin-left和margin-right为auto就可以实现水平居中了，不过要记得设置宽度。也可以用 **left** : 0 ;  **right** : 0 ; **margin** : **auto** ;代替。

<div class="cc">
        <div class="dd">absolute</div>
    </div>
    
     .cc {
                position: relative;
                background-color: #000;
                width: 50px;
                margin:0 auto;
            }

2. absolute需要设置更多的属性来实现居中，如：

方法一：使用left、right、margin值为0，实现水平居中，使用top、bottom、margin值为0实现垂直方向上居中，可以分开使用，也可以组合起来使用。同时，也需要设置宽度。

.dd {
                                position: absolute;
                                left: 0;
                                right: 0;
                                top: 0;
                                bottom: 0;
                                margin: auto;
                                width:25px;
                                height:25px; 
    	                    background: #ffffff;
    
    }

效果：

![20170311125001326][]

同时，如果把上面代码中的position设置为relative，则只能实现水平居中，而无法垂直方向上居中。

方法二：这种方法也可以实现水平垂直方向上都居中，不过要记得兼容。不需要设置宽度，可以靠内容把它撑开。

.dd { position: absolute; background: #ffffff; top: 50%; left: 50%; transform: translate(-50%, -50%); }

效果：

![Image 1][]

方法三：可以用left:50%加上margin-left:-(宽度/2)，来实现绝对定位的水平居中，这里的宽度指的是设置为绝对定位的元素的宽度。

.dd {
                position: absolute;
                background: #ffffff;
                left:50%;
                margin-left:-24%;
                width:48%;
            }

效果：

![20170311130807183][]

[20170311125001326]: /images/20220708/d0560d10101e41e4a81887788724f435.png
[Image 1]: 
[20170311130807183]: /images/20220708/b3a3655d3daa4619ad118aaea227444a.png