定位

1、静态定位

介绍:静态定位是默认值,就是之前认识的标准流。

代码:position:static;

注意点:

            ①、静态定位就是之前的标准流,不能通过方位属性进行移动;

            ②、我们之后说的定位不包括静态定位,一般特指后几种:相对、绝对、固定;

 

2、相对定位

介绍:自恋型定位,相对于自己之前的位置进行移动;

代码:position:relative;

特点:

         ①、 需要配合方位属性实现移动;

         ②、相对于自己原来位置进行移动;

         ③、在页面中占位置→没有脱标;

应用场景:

              ①、配合绝对定位组CP(子绝父相);

              ②、用于小范围的移动;

 

3 绝对定位

介绍:拼爹型定位,相对于非静态定位的父元素进行定位移动;

代码:position:absolute;

特点:

         ①、需要配合方位属性实现移动;

         ②、 默认相对于浏览器可视区域进行移动;

         ③、在页面中不占位置→已经脱标;

应用场景:①、配合绝对定位组CP(子绝父相)

(1)、子绝父相介绍:

场景:让子元素相对于父元素进行自由移动。

含义:

       ①、子元素:绝对定位

       ②、父元素:相对定位

子绝父相好处:父元素是相对定位,则对网页的布局影响最小;

(2)、(拓展)子绝父绝特殊场景

场景:在使用子绝父相的时候,发现父元素已经有绝对定位了,此时直接子绝即可!

原因:父元素已经有定位,已经满足要求了,如果盲目修改父元素定位方式,可能会影响之前写好的布局。

 

4 固定定位

介绍:死心眼型定位,相对于浏览器进行定位移动

代码:position:fixed;

特点:

       ①、需要配合方位属性实现移动;

       ②、相对于浏览器可视区域进行移动;

       ③、在页面中不占位置→已经脱标;

应用场景:让盒子固定在屏幕中的某个位置;

tip:定位的元素会脱离标准流,脱离标准流之后的元素宽高默认由内容撑开;

posted @   小石糖记  阅读(158)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示