【html&css】定位

一、定位的概念

定位需要的元素指定移动到某一个位置上去，实现一些元素的重叠操作。

将指定的元素放在固定的位置进行展示。

定位也会脱离文本流。

二、激活定位

激活定位需要使用关键字position

通过position激活定位一共有五个值

/*html默认值，没有定位，按正常的文本流规则*/
position:static;

/*粘性定位*/
position:sticky;

/*下面为用的最多的定位值*/
/*相对定位*/
position:relative;

/*绝对定位*/
position:absolute;

/*固定定位*/
position:fixed;

激活定位后通过top、bootom、left、right控制位置

三、定位演示

通过两个容器来进行位置的演示，更容易理解。

3.1、relative

以**当前的位置(**左上角)为起点。

只给container-two激活定位，并设置距离顶部的值，会发现是以当前位置为起点进行移动的。

    <div class="container-one"></div>
    <div class="container-two"></div>

/*相对定位*/
        .container-one {
            width: 200px;
            height: 200px;
            background-color: red;
        }

		//container-two激活定位，相对定位，设置距离左边0px,距离顶部10px
        .container-two {
            position: relative;
            top: 10px;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: chartreuse;
        }

相对定位图示:

3.2、absolute

以浏览器左上角为起点

只给container-two做绝对定位，距离顶部和左边值都赋值为0px,会发现container-two是以浏览器左上角为起点的。

    <div class="container-one"></div>
    <div class="container-two"></div>

/*绝对定位*/
		.container-one {
            width: 200px;
            height: 200px;
            background-color: red;
        }
		//只给container-two激活定位，绝对定位,设置距离顶部和左边距离都为0px
        .container-two {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: chartreuse;
        }

绝对定位图示:

3.3、fixed

固定定位也是以浏览器左上角为起点，但固定定位的位置固定，不会随鼠标的滚动而变换位置

只给container-two设置固定定位，并设置距离顶部和左边都为0px，会发现和绝对定位的效果类似。

    <div class="container-one"></div>
    <div class="container-two"></div>

/*固定定位*/
        .container-one {
            width: 200px;
            height: 200px;
            background-color: red;
        }
		//只给container-two激活定位，绝对定位,设置距离顶部和左边距离都为0px
        .container-two {
            position: fixed;
            left: 0;
            top: 0;

            width: 200px;
            height: 200px;
            background-color: chartreuse;
        }

固定定位图示:

四、子绝父相

绝对定位和相对定位通常用于子绝父相，能使定位的效果更好，不会造成布局错乱等问题。

操作:父容器进行相对定位，子盒子进行绝对定位，子盒子会以父盒子的左上角为起点。

    <div class="father-container">
        <div class="son-container"></div>
    </div>

        .father-container {
            position: relative;
            width: 600px;
            height: 600px;
            background-color: skyblue;
        }

        .son-container {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background-color: #f60;
        }

子绝父相图示:

五、相对居中&绝对居中

5.1、相对居中

把子级元素先用margin：auto移动到左右居中的位置，然后使用定位四个方向设置同样的值来实现一种可以理解为受力平衡来达到定位到中间的概念

    <div class="father-container">
        <div class="son-container"></div>
    </div>

		.father-container {
            position: relative;
            width: 600px;
            height: 600px;
            background-color: skyblue;
        }

        .son-container {
            position: absolute;
            margin: auto;
            left: 0;//可以不为0，但上下左右四个值必须一样
            top: 0;
            right: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background-color: #f60;
        }

相对居中图示:

5.2、绝对居中

利用定位把要居中的元素移动整个宽度的一般和高度的一半，然后配合margin把元素的中心点移动到父级的中心点

    <div class="father-container">
        <div class="son-container"></div>
    </div>

		.father-container {
            position: relative;
            width: 600px;
            height: 600px;
            background-color: skyblue;
        }

        .son-container {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;

            //需要设置在高度和宽度以后，负值为高度和宽度的一半
            margin-top: -100px;
            margin-left: -100px;
            
            background-color: #f60;
        }

相对居中图示：

六、固定定位

固定定位常用于web端的广告。典型示例为打开一个网页左下角出现的广告，鼠标滚动也不会改变位置，一直固定在屏幕左下角。

固定定位实现左下角固定广告

    <div class="fixed-container"></div>

        .fixed-container {
            position: fixed;
            bottom: 10px;
            right: 10px;
            width: 400px;
            height: 500px;
            background: orange;
        }

固定定位-广告图示:
为使效果更明显，body的高度设置为了3000px,显示了滚动条。