css之定位position

定位：Position

相对定位：relative

一、相对定位
相对定位：对象不从文档流中分离（也就是不脱标，也就是实实在在的占有那片空间），通过设置left、right、top、bottom四个方向相对于自身位置进行相对定位，也就是相对于原来的位置进行偏移。

案例：
未使用之前的css代码：

.main{
            width: 600px;
            height: 550px;
            background-color: red;
            margin: 0 auto;
            padding-top: 50px;
        }
        .sub{
            width: 500px;
            height: 500px;
            background-color: blue;
            margin-left: 50px;
        }
        .son{
            width: 400px;
            height: 400px;
            background-color: yellow;
        /*    用相对定位来实现*/
        /*    position: relative;*/
        /*    left: -50px;*/
        /*    top: -50px;*/
        }

html代码：

<div class="main">
<!--        <div class="box_b">-->
<!--            绝对定位，没有定位的父级，找body。-->
<!--        </div>-->
        <div class="sub">
            <div class="son">
                相对定位
<!--                <div class="c_son">-->
<!--                    绝对定位，有相对定位的父级-->
<!--                </div>-->
            </div>
        </div>
    </div>

未定位之前的div位置：

使用相对定位后，css代码：

.main{
            width: 600px;
            height: 550px;
            background-color: red;
            margin: 0 auto;
            padding-top: 50px;
        }
        .sub{
            width: 500px;
            height: 500px;
            background-color: blue;
            margin-left: 50px;
        }
        .son{
            width: 400px;
            height: 400px;
            background-color: yellow;
        /*    用相对定位来实现*/
            position: relative;
            left: -50px;
            top: -50px;
        }

使用相对定位后的结果：

绝对定位：absolute

二、绝对定位
绝对定位：将对象从文档流中分离出来（脱标了），通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位，在向上寻找父级对象的时候，这个父级对象也必须是定位后的，如果不存在这样的父级对象，则依据body对象（会从子元素的当前父级开始，一层层往上查找，知道找到有定位的父级元素结束，如果没有找到的话，就依据body对象）。
根据父容器（必须是非static的定位的容器）进行位置定位。要想使用绝对定位时，必须要有两个条件：
1.必须给父元素加定位属性，一般建议使用position:relative;
2.给子元素添加绝对定位position:absolute;同时要加方向属性。
（注意：一般原则上是，子绝父相，先对父级元素使用相对定位确定大体位置，再子元素使用绝对定位，来具体定位）

案例一：向上找父级时，没有找到定位的父级，则以body来进行定位。
未使用之前的css代码：

.main{
            width: 600px;
            height: 550px;
            background-color: red;
            margin: 0 auto;
            padding-top: 50px;
        }
        
.box_b{
            width: 100px;
            height: 100px;
            /*position:absolute;*/
            /*left: 10px;*/
            /*top: 10px;*/
            background-color: orange;
        }
        

html代码：

<div class="main">
       <div class="box_b">
           绝对定位，没有定位的父级，找body。
       </div--> 
</div>

未定位之前div的位置：

使用绝对定位后，css代码：

.main{
            width: 600px;
            height: 550px;
            background-color: red;
            margin: 0 auto;
            padding-top: 50px;
        }
        
.box_b{
            width: 100px;
            height: 100px;
            position:absolute;
            left: 10px;
            top: 10px;
            background-color: orange;
        }
        

使用绝对定位后结果：

案例二：向上找父级，找到一个相对定位的父级，那么就按照这个父级为基准点进行偏移。
未使用之前的css代码：

.main{
            width: 600px;
            height: 550px;
            background-color: red;
            margin: 0 auto;
            padding-top: 50px;
        }
        .sub{
            width: 500px;
            height: 500px;
            background-color: blue;
            margin-left: 50px;
        }
        .son{
            width: 400px;
            height: 400px;
            background-color: yellow;
            /*用相对定位来实现*/
            position: relative;
            left: -50px;
            top: -50px;
        }
        .c_son{
            width: 300px;
            height: 300px;
            background-color: green;
              /*position: absolute;!*绝对定位 是相对于父级来说的，有定位的父亲，没有则找body*!*/
            /*left: 10px;*/
            /*top: 10px;*/
        }
        

html代码：

    <div class="main">
<!--        <div class="box_b">-->
<!--            绝对定位，没有定位的父级，找body。-->
<!--        </div>-->
        <div class="sub">
            <div class="son">
                相对定位
                <div class="c_son">
                    绝对定位，有相对定位的父级
                </div>
            </div>
        </div>
    </div>

未使用绝对定位的结果：

使用绝对定位的css代码：

.main{
            width: 600px;
            height: 550px;
            background-color: red;
            margin: 0 auto;
            padding-top: 50px;
        }
        .sub{
            width: 500px;
            height: 500px;
            background-color: blue;
            margin-left: 50px;
        }
        .son{
            width: 400px;
            height: 400px;
            background-color: yellow;
            /*用相对定位来实现*/
            position: relative;
            left: -50px;
            top: -50px;
        }
        .c_son{
            width: 300px;
            height: 300px;
            background-color: green;
            position: absolute;/*绝对定位 是相对于父级来说的，有定位的父亲，没有则找body*/
            left: 10px;
            top: 10px;
        }
        

使用绝对定位后的结果：

结果显示：子元素以带有定位的父级为标准进行相应的定位。

案例三：向上在找定位父级的时候，这个定位的父级使用的是绝对定位。
未使用定位之前的css代码：

.main{
            width: 600px;
            height: 550px;
            background-color: red;
            margin: 0 auto;
            padding-top: 50px;
        }
        .sub{
            width: 500px;
            height: 500px;
            background-color: blue;
            margin-left: 50px;
        }
        .son{
            width: 400px;
            height: 400px;
            background-color: yellow;
            /*用相对定位来实现*/
            /*position: relative;*/
            /*left: -50px;*/
            /*top: -50px;*/
        }
        .c_son{
            width: 300px;
            height: 300px;
            background-color: green;
            /*position: absolute;!*绝对定位 是相对于父级来说的，有定位的父亲，没有则找body*!*/
            /*left: 10px;*/
            /*top: 10px;*/
        }
        .box_b{
            width: 500px;
            height: 500px;
            position:absolute;
            left: 0;
            top: 0;
            background-color: orange;
        }

html代码：

 <div class="main">
        <div class="box_b">
            绝对定位，没有定位的父级，找body。

            <div class="sub">
                        <div class="son">
<!--                            相对定位-->
                            <div class="c_son">
                                绝对定位，有绝对定位的父级
                            </div>
                        </div>
            </div>


        </div>

    </div>

未使用定位之前的结果：

使用定位的css代码：

.main{
            width: 600px;
            height: 550px;
            background-color: red;
            margin: 0 auto;
            padding-top: 50px;
        }
        .sub{
            width: 500px;
            height: 500px;
            background-color: blue;
            margin-left: 50px;
        }
        .son{
            width: 400px;
            height: 400px;
            background-color: yellow;
            /*用相对定位来实现*/
            /*position: relative;*/
            /*left: -50px;*/
            /*top: -50px;*/
        }
        .c_son{
            width: 300px;
            height: 300px;
            background-color: green;
            position: absolute;/*绝对定位 是相对于父级来说的，有定位的父亲，没有则找body*/
            left: 10px;
            top: 10px;
        }
        .box_b{
            width: 500px;
            height: 500px;
            position:absolute;
            left: 0;
            top: 0;
            background-color: orange;
        }

使用定位后的结果：

二者区别

	绝对定位是以有定位的父元素为基准点，进行定位---会脱离文档流。

相对定位是根据其自身现在的位置为基准点，进行定位—离开原位置，但还占着原来的空间。

固定定位：fixed

	固定在浏览器的某个位置，浏览器scroll时不会发生变化。（比如网页上经常遇到的小广告）

使用固定定位的css代码：

		 .box4{
            width: 150px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            position: fixed;
            right: 0;
            bottom: 0;
        }

html代码：

	<div class="box4">你猜我是广告嘛^_^</div>

使用定位后的结果：