CSS定位-CSDN博客

本文链接：https://blog.csdn.net/weixin_44697506/article/details/131883089

本文介绍了CSS中的定位技术，包括标准流、浮动布局和定位布局的特性。重点讲解了相对定位、绝对定位和固定定位的用法，以及如何设置偏移值和控制元素的层级关系。此外，还探讨了如何实现元素的水平垂直居中方法。

摘要由CSDN通过智能技术生成

CSS定位

一、常见的网页布局方式

布局方式	特点
标准流	块级元素独占一行——>垂直布局行内元素/行内块元素一行显示多个——>水平布局
浮动	使原本垂直布局的块级元素变成水平布局
定位	可以让元素自由摆放在网页的任意位置一般用于盒子之间的层叠情况让盒子固定在页面的某一位置

二、定位

1、定位方式

position: 定位方式；

定位方式	属性值	特点
静态定位	static	相当于没有使用定位
相对定位	relative	占有原来的位置相对于自己之前的位置不改变显示模式
绝对定位	absolute	相对于非静态的父元素定位不占有原来的位置改变显示模式默认以浏览器body定位
固定定位	fixed	脱离标准流、不占位置相对于浏览器定位具备行内块的特点

2、设置偏移值

偏移值可以设置水平和垂直方向
选取原则：就近原则

3、偏移方向

水平距离左边 left
水平距离右边 right
垂直距离上边 top
垂直距离下边 buttom

4、相对定位

/* 若四个偏移方向都有值，以top和left为准*/
position: relative
left: 100px;
top: 100px;

5、绝对定位

/*子绝父相：父级相对定位，子级绝对定位*/
/*绝对定位查找父级的方法：逐级向上，最终是浏览器窗口 */
position: absolue
left: 100px;
top: 100px;

6、固定定位

positions: fixed;

7、元素的层级关系

不同布局方式之间的层级关系：标准流<浮动<定位
不同定位之间的层级关系：

相对、绝对、固定定位默认层级相同
此时HTML中写在下面的元素层级跟高，会覆盖上面的元素
**z-index: 数值；**可以改变元素的层级关系，数值越大，层级越高(只有配合定位才能生效)。

三、定位-居中

<!--绝对定位水平垂直居中-->
<html lang="en">
<head>
    <style>
        .father{
            position: absolute;
            /* 方式一：使用margin，手动计算 */
           left: 50%;
           margin-left: -150px;
           top: 50%;
           margin-top: -150px;
           /* 方式二：使用transform，移动宽高的一半 */
           left: 50%;
           top: 50%;
           transform: translate(-50%,-50%);
          
            width: 400px;
            height: 400px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>