position定位与子绝父相

Muskok

已于 2023-09-01 17:01:18 修改

阅读量384

点赞数 2

文章标签： html javascript 前端

于 2023-09-01 16:59:05 首次发布

本文链接：https://blog.csdn.net/Muskok/article/details/132626025

版权

属性定义及使用说明

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

属性值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

值

描述

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成固定定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

偏移值

left：数字+px 距离左边的距离

right：数字+px 距离右边的距离

top：数字+px 距离上边的距离

bottom：数字+px 距离下边的距离

相对定位

相对于自身之前位置移动

代码:

 position: relative;

特点：

1.需要配合方位属性实现移动

2.相对于自己原来位置进行移动

3.在页面中占位置 → 没有脱标

应用场景：

1.配合绝对定位组CP（子绝父相）

2.用于小范围的移动

示例：设计一个宽高400px的红色盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: red;
            
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

初始位置为

现在给它加一个相对定位，要求距离上边和左边分开100px

 .box {
       width: 400px;
       height: 400px;
       background-color: red;
       position: relative;
       top: 100px;
       left: 100px;
        }

效果如下

可以看到盒子在原来的位置上距离上边和左边分开了100px

绝对定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

代码

 position: absolute;

特点：

1.需要配合方位属性实现移动

2.默认相对于浏览器可视区域进行移动

3.在页面中不占位置 → 已经脱标

应用场景：

配合绝对定位组CP（子绝父相）

示例：

在原先的代码上给红色box盒子添加一个子元素黑色boxSon盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;
            top: 100px;
            left: 100px;
        }

        .boxSon {
            width: 100px;
            height: 100px;
            background-color: rgb(17, 16, 16);

        }
    </style>
</head>

<body>
    <div class="box">
        <div class="boxSon">
        </div>
    </div>
</body>

</html>

初始效果如下

给子盒子boxSon添加绝对定位后，它会相对于父元素红色box进行移动，这里给它设定距离父元素上边和左边100px

 .boxSon {
            width: 100px;
            height: 100px;
            background-color: rgb(17, 16, 16);
            position: absolute;
            top: 100px;
            left: 100px;
        }

效果如下

子绝父相

场景：

让子元素相对于父元素进行自由移动

含义：

子元素：绝对定位

父元素：相对定位

子绝父相好处：

父元素是相对定位，则对网页布局影响最小，儿元素是绝对定位，跟随父元素移动，样式不会随着移动而改变

示例：

让上述的红色box对整个<html>页面向左向下移动1000px，子元素黑色boxSon在父元素红色box内会保持原有位置不变

  .box {
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;
            top: 500px;
            left: 500px;
        }

效果

子绝父相的居中方式

1.子绝父相

2.先让子盒子往右移动父盒子的一半 left：50%

3.再让子盒子往左移动自己的一半 transform：translateX(-50%)

示例：让黑色盒子在红色盒子中居中，即使改变黑色盒子大小，居中位置仍不变

   .boxSon {
            width: 100px;
            height: 100px;
            background-color: rgb(17, 16, 16);
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

固定定位

元素的位置相对于浏览器窗口是固定位置

即使窗口是滚动的它也不会移动

代码

position:fixed

特点：

1.需要配合方位属性实现移动

2.相对于浏览器可视区域进行移动

3.在页面中不占位置 → 已经脱标

应用场景：

让盒子固定在屏幕中的某个位置，比如网页的页脚或者头部导航栏

设置一个盒子，让它固定在右边且距离下边100px


        .boxRight {
            width: 50px;
            height: 500px;
            background-color: rgb(30, 224, 30);
            position: fixed;
            right: 0;
            bottom: 100px;
        }

效果如下