CSS定位(position)

CSS定位(position)

1、定位-position介绍

Positioned Layout Module：提供与元素定位和层叠相关功能它是核心模块

.box {

position:relative;

}

(1)盒子模型的类型和尺寸I

(2)布局模型

(3)元素之间的关系

(4)视口大小、图像大小等其他相关方面

 

position属性

1、 sition-static

静态定位/常规定位/自然定位

 

作用

使元素定位于常规/自然流中

(块、行垂直排列下去、行内水平从左到右)

特点

(1)忽略top, bottom, left, right或者z-index声明

(2)两个相邻的元素如果都设置了外边距,那么最终外边距=两者外边距中最大的

(3)具有固定width和height值的元素,如果把左右外边距设置为auto ,则左右外边距会自动扩大占满剩余宽度。造成的效果就是这个块水平居中

 

2、sition-relative

相对定位

 

作用

使元素成为containing-block- 官话是可定位的祖先元素

特点

(1)可以使用top/right/bottom/left/z-index进行相对定位

(2)相对定位的元素不会离开常规流

(3)任何元素都可以设置为relative,它的绝对定位的后代都可以相对于它进行绝对定位

(4)可以使浮动元素发生偏移,并控制它们的堆叠顺序

             

3、sition-absolute

绝对定位

 

作用

使元素脱离常规流

特点

(1)脱离常规流

(2)设置尺寸要注意:百分比比的是谁?一最近定位祖先元素

(3)Irtb如果设置为0它将对齐到最近定位祖先元素的各边一衍生出一个居中妙计

(4)Irtb如果设置为auto它将被打回原形

(5)如果没有最近定位祖先元素会认<body>做爹爹

(6)z-index可以控制堆叠顺序999999见过吧?

 

4、 position-fixed

固定定位

 

作用

我跟绝对定位本是同根生相煎何太急

特点

(1)跟absolute有啥区别?相对于谁做绝对定位

(2)固定定位元素不会随着视口滚动而滚动

(3)继承absolute特点

 

5、 position-sticky

              贴定位/粘性定位/吸附定位

 

作用

relavtive + fixed的完美结合,制造出吸附效果

特点

(1)如果产生偏移原位置还是会在常规流中,一亩三分地留着

(2)如果它的最近祖先元素有滚动那么它的偏移标尺就是最近祖先元素

(3)如果最近祖先元素没有滚动那么它的偏移标尺是视口

(4)上下左右的偏移规则

 

posted @ 2020-08-04 08:35  GsFortemps  阅读(279)  评论(0)    收藏  举报