定位和布局

最新推荐文章于 2024-09-15 21:53:51 发布

不染126

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量81

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_59541478/article/details/126475898

版权

定位分为静态定位（默认）、相对定位、绝对定位、固定定位、粘性定位

1.相对定位

特性：相对于自身在浏览器中的位置，不脱离文档流（也就是说会占据屏幕空间）

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .div1,
        .div2,
        .div3 {
            width: 100px;
            height: 100px;
        }
        
        .div1 {
            background-color: red;
        }
        
        .div2 {
            background-color: blue;
            position: relative;
            top: 40px;
            left: 40px
        }
        
        .div3 {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>

如图，对div2设置相对定位，它会相对于前一个盒子外边距为40px，相对于屏幕左侧40px

2.绝对定位

特性：1.脱离文档流，原先位置不保留

2.默认使用绝对定位元素，无论有没有父元素，参照点是body

3.如果祖先元素使用了定位属性，则相对于祖先元素定位

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .div1,
        .div2,
        .div3 {
            width: 100px;
            height: 100px;
        }
        
        .div1 {
            background-color: red;
        }
        
        .div2 {
            background-color: blue;
            position: relative;
        }
        
        .div3 {
            background-color: pink;
        }
        
        .div4 {
            width: 50px;
            height: 50px;
            background-color: aqua;
            position: absolute;
            top: 40px;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div2">
        <div class="div4"></div>
    </div>
    <div class="div3"></div>
</body>

如图，对div4设置绝对定位，div4相对于父盒子div2距离它的上边框距离为40px

对于设置了绝对定位的子元素，一般要对其父元素设置相对定位，即子绝父相，否则不利于布局