相对定位:相对自己本身进行偏移

CSS语法:

position: relative;/*相对自己进行定位*/
top: 10px;/*距离上边*/
left: 10px;/*距离左边*/

演示图:

相对定位、绝对定位、固定定位、绝对定位堆叠顺序-LMLPHP


 绝对定位:默认以浏览器进行定位。如果想依照父盒子定位,需要在父盒子中设置一个不设置偏移量的相对定位,再在子盒子中设置绝对定位,这样就是依照父盒子进行绝对定位。

CSS语法:

参照浏览器: 

position: absolute;/*绝对定位*/
top: 10px;/*距离上边*/
left: 10px;/*距离左边*/

参照父盒子:

/*假设box是box1的父盒子,此时我想让box的子盒子参考父盒子box进行绝对定位,则分两步:1.在父盒子设置一个不带偏移量的相对定位。2.在子盒子设置绝对定位。*/

            .box{
                width: 800px;
                height: 800px;

                position: relative;/*1.设置一个不带偏移量的相对定位。*/


                
            }


            .box1{
                width: 300px;
                height: 300px;

                position: absolute;/*2.设置绝对定位。这样就是参照box盒子进行定位*/
                top: 10px;/*距离上边*/
                left: 10px;/*距离左边*/

                
            }

演示图:

相对定位、绝对定位、固定定位、绝对定位堆叠顺序-LMLPHP

注意:

一、绝对定位的盒子垂直居中

1.把top设为50%

2.margin-top设为负自己盒子高度的一半

 二、绝对定位的盒子水平居中

1.把left设为50%

2.margin-left设为负自己盒子宽度的一半


固定定位:位置固定在页面的位置上


绝对定位堆叠顺序:把盒子放在最上面到最下面的顺序。相对于其他盒子设置的z-index,设置z-index的值最大,则该盒子在最上面。

CSS语法:

z-index: 9999;/*相对于其他盒子设置的z-index,设置z-index的值最大,则该盒子在最上面*/
11-22 01:11