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

最新推荐文章于 2024-08-15 18:19:19 发布

Ednah

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量706

点赞数

分类专栏： HTML&&CSS 文章标签： web开发前端 css

本文链接：https://blog.csdn.net/Ednah/article/details/61209255

版权

HTML&&CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

一. position的四种定位

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

}

效果：

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

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

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

效果：

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

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

效果：