relative absolute

最新推荐文章于 2023-08-20 13:59:37 发布

一只肥鹤

最新推荐文章于 2023-08-20 13:59:37 发布

阅读量182

点赞数

本文链接：https://blog.csdn.net/weixin_43322208/article/details/89418668

版权

Position的属性值有：
1.Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位
2.Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。
3.Relative：相对定位，是相对于其原本的位置来定位的。
4.Static：默认值，没有定位。
5.Inherit：继承父元素的position值。

Absolution：若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，脱离文档流，因此不会占据文档流上的位置。

Relative：若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。（自己代码测试的时候发现子relative没有将父relative撑开，发现问题是因为父元素是div，块级元素默认占满其父元素的宽度，所以父relative本身就是100%，只有给父relative设置display：inline-block，才能观察到是否被撑开）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>relative_absolute</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .all{
            padding-left: 200px;
            padding-right: 300px;

        }
        .div1{
            background-color: #e4b9b9;
            height: 100px;
        }
        .div2{
            background-color: #a3d48e;
            position: relative;
            left: 50px;    /*20向右偏移，-20向左偏移*/
            top: 10px;
            height: 100px;
            width: 100%;
        }
        .div3{
            background-color: #fe626d;
            height: 100px;
            opacity: 0.6;
        }
        .div4_Container{
            position: relative;
            height: auto;
            width: auto;
            border: 2px solid #0b51b4;
        }
        .div4{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 100%; /*绝对定位的元素宽度100%是 最近的且不是static定位的父元素 的宽度*/  /*绝对定位的子元素设定过大时，父元素不会被撑开*/
            background-color: #00BCD4;
            height: 100px;
            opacity: 0.6;
        }
        .div5_Container{
            display: inline-block;/*不加这句话他的宽度是满的，也无法测试div5能不能撑开宽高。因为一个div默认占一行宽度*/
            position: relative;
            left: 100px;
            min-width: 20px;
            border: 2px solid black;

        }
        .div5{
            position: relative;
            top: 0px;
            width: 1000px; /*绝对定位的元素宽度100%是 最近的且不是static定位的父元素 的宽度*/  /*绝对定位的子元素设定过大时，父元素不会被撑开*/
            background-color: #3DB271;
            height: 300px;
            opacity: 0.6;
        }
    </style>
</head>
<body>
<div class="all">
<div class="div1">第一个div</div>
<div class="div2">第二个div</div>
<div class="div3">第三个div</div>
<div class="div4_Container">
    第四个div包裹器
    <div class="div4">第四个div(参照元素（最近的且不是static定位的父元素）的宽度)</div>
</div>
<div class="div5_Container">
    第五个div包裹器（可以看出第四个div不在文档流上，没有占用高度）
    <div class="div5">第五个div（top：0位置是排列在父元素字体内容下的，而不是与父元素同样起始点）
    而且可以看到 第五个div 撑开了父元素-第五个div包裹器 </div>
</div>
</div>
</body>
</html>

一只肥鹤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
relative absolute

Position的属性值有：1.Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位2.Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。3.Relative：相对定位，是相对于其原本的位置来定位的。4.Static：默认值，没有定位。5.Inherit：继承父元素的position值。Absolution：若该元素没有设置宽...
复制链接

扫一扫