css relative 和absolute布局

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

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

绝对定位的特点

  1. 开启绝对定位后,如果不设置偏移量,元素的位置不会发生变化。

  2. 开区绝对定位后的元素脱离文档流

  3. 绝对定位会改变元素的性质,行内变成快,快的高度被内容撑开。

  4. 决定定位会使元素提升一个层级。

  5. 绝对定位元素时相对于其包含块进行定位的。

相对定位的特点

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

参考:一文读懂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 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>

页面预览

相关推荐
SoaringHeart27 分钟前
Flutter小技巧:IM音浪效果实现
前端·flutter
小old弟28 分钟前
亲测autojs自动化,关闭应用的三种方法
前端
AndyLaw28 分钟前
我用 ChatGPT 起手、脚本改造,给孩子做了一个绘本
前端·javascript·openai
放空欧巴28 分钟前
学习 elpis 有感 -- 初识 elpis-core (实现简易版 Egg.js)
前端
前端开发呀30 分钟前
震惊!开启浏览器翻译竟会导致react应用报错?
前端·react.js
Sun_light32 分钟前
从 0 到 1 实现低代码编辑器的基本功能
前端·react.js·typescript
WildBlue34 分钟前
从 0 到 1 上手 React 中的 mitt,前端小白也能秒懂!🤓
前端·react.js·前端框架
星河那美39 分钟前
使用vis-timeline 完成时间轴事件追踪表
前端·vue.js
前端小棒槌40 分钟前
前端项目同时配置ESlint和Prettier
前端