脱离标准文档流---定位

Posted 2021-11-03 roseneverdie

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了脱离标准文档流---定位相关的知识，希望对你有一定的参考价值。

定位

三种定位

技术图片

可以使标准流脱离的定位：绝对定位,固定定位。

相对定位

属性值:relative(相对的)----权当我复习了一边英语单词。

下面是我对于相对定位的理解：

绝对定位在某种程度上相当于灵魂出窍(脑洞大开),也就是说那些被我们通过偏移量所移动的元素,他们的灵魂仍在原来的位置,我们所看到的是实体。

但是客观一点来说的话,就是相对定位无法使标准流脱标,所以我们所移动的元素仍是标准流,标准流的特点就是独自占有一行,一个标签换一次行。

图示如下：

技术图片

我们可以看出来蓝色块已经不再原处了,但下面的粉色块还没变化,这里也体现了相对定位的优点：不会影响我们的网页结构。

注意事项

不要同操纵相对的两个方向的偏移量。(意思是不能同时设置上和下,或者左和右)

优点

1.结构比较稳固,经常用来做绝对元素的参考元素。

参考元素：是我们的偏移量在偏移时参考的元素,也就是说你是根据啥偏移的,可以是整个页面(body)也可以是一个盒子(这里还有点讲究.后面会提到)。

2.微调(有时候为了页面的美观,需要调节几个像素的大小,这时结构稳定的相对定位就很好使了)

绝对定位

属性值：absolute(绝对的)

绝对定位会使标准流脱标

技术图片

两种偏移参考对象

1.body

我们啥都没有设置,仅仅使用了偏移的话,参考对象就是body

2.参考祖先对象(父盒子)

子盒子想要以父盒子作为参照对象的话,必须给父盒子父盒子也设置一种定位方式(三种定位方式都行),最好使用相对定位,前面总结浮动的时候,已经深深的了解到了非标准流元素处理不当的话,将会对结构造成一些影响,所以我们尽量将父盒子的定位方式设置为稳定的相对定位。

绝对定位做压盖效果

直接通过偏移把元素放我们压盖的元素之上就好了。

绝对定位做居中效果

让left(right)偏移量为50%,margin-left(right)为盒子长度的一半。可以达到水平居中的效果。

让top(bottom)偏移量为50%,margin-top(bottom)为盒子长度的一半。可以达到竖直居中的效果。

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>绝对定位制作压盖效果+居中</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                box-sizing: border-box;
            }
            .big{
                margin: 0 auto;
                margin-top:100px ;
                width: 400px;
                height: 400px;
                border: 1px yellow solid;
                padding: 50px;
            }
            .small{
                width: 290px;
                height: 290px;
                border: 1px red solid;
                background: red;
                position: relative;
            }
            .little{
                width: 150px;
                height: 150px;
                background: green;
                position: absolute;
                left: 50px;
                top: 50px;
            }
            .little{
                left: 50%;
                margin-left: -75px;
                top: 50%;
                margin-top:-75px ;
            }
            
        </style>
    </head>
    <body>
        <div class="big">
            <div class="small">
                <div class="little"></div>
            </div>
        </div>
    </body>
</html>