CSS--定位 &层次

1.什么是定位?

定位就是使得元素按照你想的去摆放。

2.样式关键字

 position是 样式关键字

        可选值 

                relative  相对定位

                fixed     固定定位

                absolute 绝对定位

                static 默认值

3.什么是相对定位已经怎么设置相对定位?

    相对定位 指的是相对于当前元素的位置而改变的定位。以盒子左上方那个脚为0,0点而改变位置。

    1》.将position的 值设置为 relative

    2》.通过 left top bottom right 四个值来设置偏移量。

            left :100px; 

            top :100px;

           向左偏移100px  

            向上便宜100px 

          此时相对于之前源点的坐标为 100px,100px

          left  right  top bottom 和margin 有点像。设置left位100px 实际上是 向右偏移100px。就好像将外间距设置为100px;

    3》相对定位的特点

        相对定位没有使得元素脱离文档流 

        设置相对定位以后盒子的层次会比没有设置的高。所以设置相对定位后的盒子会盖住没有设置的。

        设置相对定位以后块元素还是块元素,内连元素还是内连元素,并不会改变元素的类型。

        只是开启了相对定位没有设置偏移量,对元素没有任何的变化。

   4.什么是绝对定位以及怎么设置绝度定位

        绝对定位指的是按照最近的祖先元素(开启了定位的祖先元素。只要不是默认值都算开启定位。),的左上角为0,0点而定位。  假如没有这样的祖先元素。那么他就按照浏览器的左上角为0 ,0点进行定位。

  设置方式  1》将position的值设置为 absolute 。

                 2》然后根据不同的定位点 设置left right top  bottom 四个便宜量即可

    特点 :   当开启了绝对定位,元素就脱离了文档流。

                元素脱离了文档流。那么块元素不在独占一行,如果不设置大小的话,大小被子元素撑开。内连元素也变成了块元素。        

                绝对定位会改变元素的类型。

   5.什么是固定定位以及怎么设置固定定位

        固定定位指定是 一直按照浏览器的窗口左上方进行定位的。无论鼠标怎么滚都按照你移动后浏览器窗口的左上方进行定位。  网页中的广告,很多就是采取这种形式的。无论你怎么滚鼠标他就是跟着你的屏幕走。

       设置方式

                    1.将position 的值设置为 fixed

                    2.根据窗口左上方为0,0点设置偏移量。

      特点: 固定定位也是绝对定位的一种。也会使得元素脱离文档流。                         

    6.什么是层次

        设置了定位以后。有些块元素会压在某些块元素的上面。如果想要改变默认的被压着,就要通过设置层级的方式来改变

    层级只有当。开启了定位以后才能设置。

    7.层级关键字

         z-index :层数;

        覆盖的规则: 子元素永远不可能被父元素覆盖

                            兄弟之间,层次高的覆盖层次低的

                            兄弟之间层次一样。是写在下面的层次覆盖上面的层次

猜你喜欢

转载自blog.csdn.net/lw277232240/article/details/80741013