CSS之绝对定位_css 开启绝对定位-CSDN博客

本文链接：https://blog.csdn.net/weixin_74401967/article/details/140573043

以下是代码，可自行调试

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_绝对定位</title>
    <style>
        .outer {
            width: 500px;
            background-color: skyblue;
            border: 1px solid black;
            padding: 20px;
            position: relative;

        }
        .box {
            width: 200px;
            height: 200px;
            font-size: 20px;
        }
        .box1 {
            background-color: #888;
        }
        .box2 {
            background-color: orange;
            /* 开启绝对定位 */
            position: absolute;
            /* 开启绝对定位之后发现，下面那个三不见了，实际上，这是开启绝对定位之后的box2，它脱离的文档流
            这有点跟浮动相似，但是跟浮动不一样的点就是：它会把box3里面的数字一起覆盖了
            还有一点跟浮动不一样的点就在：浮动开启之后是要指定方位的，但是绝对定位它就是原地起飞了，
            而且可以通过四个方位来调整位置
            */

            top: 0px;
            left: 0px;
            
            /* 绝对定位也可以超出其父元素的范围 */
            /* right: -100px;
            bottom: -50px; */
            /* 与相对定位同理，开启左之后右失效，开启上之后下失效 */
        

            /* 什么是包含块儿
            1.没有脱离文档流的元素，其父元素就是包含块
            2.脱离文档流的元素，第一个开启定位（无论何种定位）的祖先元素，就是它的包含块
            如果祖先元素没有任何一个元素开启定位，那么这个元素就会以html作为它的包含块儿，
            一般我们都会将元素的父元素作为它的包含块，这样方便管理，所以就会有一个口诀，叫做：子绝父相
            */

            margin-top: 100px;
            margin-right: 1000px;
            /* 绝对定位也可以与margin一起使用，但是有一个规则：
            如果你写的是left和top            
            那你只能使用margin-top和margin-left而不能使用margin-right和margin-bottom
            */

            float: right;
            /* 绝对定位不能和浮动一起使用，如果两个都写了，那只参照绝对定位 */

            
        }
        span {
            /* 不管是块元素还是行内元素以及行内块元素，只要开启了定位，那它就变成了绝对元素
               比如你写一个span元素，但是你给它加了绝对元素，那它就可以设置宽高
            */
            font-size: 40px;
            color: red;
            position: absolute;
            width: 120px;
            height: 120px;
            background-color: purple;
            left: 250px;
            top: 0px;
        }

        .box3 {
            background-color: green;
        }

        /* 绝对定位的用途：用于覆盖区域，比如京东主页面的重叠 */
        .outer:hover .box2{
            left: 200px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <span>测试</span>
    </div>
</body>
</html>

如何设置绝对定位？

给元素设置 position : absolute即可实现绝对定位

可以使用 left、right、top、bottom四个属性调整位置

绝对定位的参考点在哪里？（以什么为原点）

绝对定位的参考点是本身元素它的包含块

什么是包含块儿：

1.没有脱离文档流的元素，其父元素就是包含块

2.脱离文档流的元素，第一个开启定位（无论何种定位）的祖先元素，就是它的包含块

如果祖先元素没有任何一个元素开启定位，那么这个元素就会以html作为它的包含块儿，一般我们都会将元素的父元素作为它的包含块，这样方便管理，所以就会有一个口诀，叫做：子绝父相

绝对定位元素的特点：

1.脱离文档流，会对后面的兄弟元素，父元素有影响。

注意区别于浮动的不同点：

a.它会把兄弟元素里面的数字一起覆盖。

b.浮动开启之后是要指定方位的，但是绝对定位它就是原地起飞，而且可以通过四个方位像素来调整位置

2.跟相对定位一样，left和right不能一起设置，否则只有left起效，top和bottom不能一起设置，否则只有top起效

3.绝对定位和浮动不能同时设置，如果同时设置之后，绝对定位会生效，浮动失效（不论顺序如何）

4.绝对定位的元素，也可以通过margin调整位置，但是不推荐这样做，另外对于开启绝对定位之后的元素，它设置margin的时候有一处比较奇怪的地方：

就是你的绝对定位如果开启的是left和top，那么margin只有使用margin-left或者margin-top才会有作用，而margin-right和margin-bottom是失效的。

5.无论是什么元素（块、行内、行内块），只要设置绝对定位之后，都会变成定位元素。

比如你写一个span元素，但是你给它加了绝对元素，那它就可以设置宽高。

span {
            /* 不管是块元素还是行内元素以及行内块元素，只要开启了定位，那它就变成了绝对元素
               比如你写一个span元素，但是你给它加了绝对元素，那它就可以设置宽高
            */
            font-size: 40px;
            color: red;
            position: absolute;
            width: 120px;
            height: 120px;
            background-color: purple;
            left: 250px;
            top: 0px;
        }