css relative 和absolute布局

1、relative和absolute内部的元素都是相对于父容器，若父容器没有指定为relative，则默认为整个文档视图空间，absolute可以重叠元素，relative则不行。relative意味着元素的任意属性如left和right都是相对于其他元素的。absolute则相当于外部容器。

2、margin属性相对于容器中的其他元素和父边框

绝对定位的特点

开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化。
开区绝对定位后的元素脱离文档流
绝对定位会改变元素的性质，行内变成快，快的高度被内容撑开。
决定定位会使元素提升一个层级。
绝对定位元素时相对于其包含块进行定位的。

相对定位的特点

元素开启相对定位以后，如果不设置偏移量，元素不会发生任何的变化。
它是参照于元素在文档流中的位置进行定位的。
它会提升元素的层级。
它不会使元素脱离文档流。
它不会改变元素的性质：块元素还是块元素，行内元素还是行内元素。

参考：一文读懂css【css3】绝对（absolute）定位和相对（relative）定位相对定位是相对谁定位的绝对定位又是根据谁绝对定位的子绝父相包含块_css absolute相对于谁定位_互联网全栈开发实战的博客-CSDN博客

Absolute：元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。

Relative：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。
————————————————
版权声明：本文为CSDN博主「Lminxia」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42067967/article/details/80152403


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .container{
            width: 100%;
            height: 100px;
            background-color: blueviolet;
        }
        .wrapper{
            width: 100%;
            height: 50px;
            background-color: red;
            position: relative;
        }
        .b1{
            position: absolute;
            margin-left: 10px;
            margin-top: 10px;
            width: 20px;
            height: 20px;
            background-color: blue;
        }
        .b2{
            position: absolute;
            right: 5px;
            top:5px;
            width: 20px;
            height: 20px;
            background-color: green;
 
        }
    style>
head>
<body>
    <div class="container">
        <div class="wrapper">
            <div class="b1">div>
            <div class="b2">div>
        div>
    div>
body>
html>

页面预览

相关阅读:
【Java每日一题】— —第三十一题：银行账号管理程序设计（2023.10.15）
java spring cloud 企业工程管理系统源码+二次开发+定制化服务
postman学习笔记
【123. 买卖股票的最佳时机 III】
【译】使用最新预览版查看您的拉请求注释
伪元素和伪类的区别和作用？
PAT 1030 Travel Plan
Linux系统使用宝塔面板安装MySQL服务并实现公网远程访问本地数据库【内网穿透】
大端和小端模式
java-net-php-python-jsp员工考勤录像计算机毕业设计程序

原文地址：https://blog.csdn.net/u012599545/article/details/132777792