探究:无依赖绝对定位的位置追随-开启绝对定位不设置偏移量元素的位置

探究:无依赖绝对定位的位置追随-开启绝对定位不设置偏移量元素的位置

    • 测试
    • 讨论

昨天看了尚硅谷的css教程,其中第147集中的示范,老师给下拉菜单开启绝对定位,没有设置偏移量,但下拉菜单的位置竟然往下移动了。
看到这里百思不得其解,之前学的和在网上搜的资料说的都是元素开启绝对定位后如果不设置top/bottom/left/right,元素的位置不会发生变化,会呆在它原先在文档流中的位置,即默认偏移量是当前位置。
一开始以为是定位和弹性布局的一些冲突导致的,但后来做了这个test发现和flex无关,还是绝对定位的问题,并不是所有情况下都“位置不发生变化”:

测试

.outer {
            width: 500px;
            height: 300px;
            background-color: #bda;
            margin: 100px auto;
            text-align: center;
        }

        .wrapper {
            border: solid 5px red;
            display: inline-block;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: orange;
            display: inline-block;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            display: inline-block;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: pink;
            display: inline-block;
        }

探究:无依赖绝对定位的位置追随-开启绝对定位不设置偏移量元素的位置_第1张图片

效果如下:outer是淡绿色的div,带红色边框的wrapper和它里面包含的三个box都是inline-block。outer设置了 text-align:center使得wrapper水平居中。

现在给中间的灰色box2开启绝对定位:

.box2 {
	position: absolute;
}

此时box2脱离了文档流,wrapper现在由box1和3撑开,仍然在outer中居中。灰色的box2因为绝对定位提高层级盖住了粉色的box3(可以用opacity:0检查),而这说明灰色的box2移动了,并不在它原来outer正中间的位置而是在新布局中box1的右边。

现在再试一下如果改变box123在html结构中的顺序:

2
1
3

顺序改为213:
探究:无依赖绝对定位的位置追随-开启绝对定位不设置偏移量元素的位置_第2张图片
然后同样给box2开启绝对定位:

.box2 {
	position: absolute;
}

探究:无依赖绝对定位的位置追随-开启绝对定位不设置偏移量元素的位置_第3张图片
此时box2覆盖了box1(同样用opacity:0检查过了)。box2在html结构中是wrapper里的第一个元素,而它的新位置也是wrapper在box2脱离文档流后新布局中第一个元素应该在的位置。

为了印证猜想最后又把三个盒子都开启绝对定位,果然是这样的布局:探究:无依赖绝对定位的位置追随-开启绝对定位不设置偏移量元素的位置_第4张图片

讨论

经过上述例子,似乎主流说法中“元素开启绝对定位后如果不设置top/bottom/left/right任何偏移量,它会保持原先在文档流中的位置,不会移动”这个说法是不够严谨的?
在上面三个例子中,box2脱离文档流会导致它前面的元素和它父元素的位置发生改变,box2的新位置是 元素脱离文档流后导致的新布局下,根据元素在父元素中的html结构,它会占的位置
而一般情况下元素开启绝对定位只会让它后面的元素拱上来而不会影响它前面元素的位置,父元素也只会高度塌陷不会改变位置,所以一般说元素开启绝对定位后会有所谓的“位置追随”,保留其在原来文档流中的位置。
上面的例子中开启绝对定位的元素会使它前面的元素和它自己都发生位移,是不是说明开启绝对定位但不设置偏移量的元素其实并不是主流说法中呆在它原来的位置,而应该是在新布局中根据它在父元素中的结构会占的位置(尽管这个新布局就是它脱离文档流导致的)?只不过大部分情况下该元素前面的结构和父元素不会位移,所以老位置=新位置,让人误以为如果只是开启绝对定位不会让它位移?

在网上搜了一圈好像也没找到讨论这个问题的,初学小菜鸟实在是百思不得其解。。。第一次写博客,感谢读到的朋友们讨论指正!!

你可能感兴趣的:(css,css3,html,前端)