Css定位之absolute_慕课网课程笔记

absolute和float

绝对定位和浮动有相似之处,即都有破坏性和包裹性,破坏性是指其会导致包裹自身的复原塌陷,包裹性是float的天赋技能,对于绝对定位来说,其会包括子元素

越独立越强大

1.去浮动

当浮动和absolute同时应用时,元素使用绝对定位而不再展示浮动样式

2.位置跟随

当元素使用绝对定位时而没有设置具体的位移时,其表现类似于悬浮在原来位置上方,后方元素向前补足

3.超越overflow

当元素使用绝对定位时,可以不受父元素overflow属性影响,始终固定在一个位置

z-index 无依赖

1.如果只有一个绝对定位元素,自然不需要z-index,自动覆盖普通元素(悬浮特性)

2.如果两个绝对定位,控制DOM流的先后顺序来达到覆盖效果(后面的元素在上面)

3.如果多个绝对定位交错,最上面的给一个z-index值好了

4.如果非弹窗类的绝对定位元素的z-index>2,可能存在优化空间了

绝对定位元素的宽高和相对位移

• 相互替代性

绝对定位的方向是对立的,当同时设置top/bottom 和left/right 时,会将绝对定位元素拉伸,也就是时候,有些时候,我们是可以把绝对定位元素的宽高和相对位移相互替代的.

但是拉伸在有些场景下更加强大,比如需要设置一个距离某个方向一定距离的自适应的容器,这个时候设置宽或者高都比较复杂,但是使用拉伸就可以很好的实现

.

• 相互支持性

1.容器不需要固定宽高值,内部元素也可以拉伸;

也就是说,当一个绝对定位元素作为容器时,即使是其不设置宽高,内部元素也可以拉伸,前提是有内部元素设置跨高,否则整个容器都是宽高的,拉伸效果也看不出来...

2.容器拉伸后,其内部元素支持百分比的宽高.

一般情况下,只有父容器设置明确的宽高值后,子元素才可以使用百分比来设置宽高,但是,绝对定位元素即便是设置auto,只要拉伸后,子元素就可以使用百分比来明确宽高.

3.相互合作

当拉伸和宽高同时出现时,已宽高的优先级较高

Tips 当尺寸限制 拉伸和margin:auto同时出现时,就会有绝对定位元素绝对居中的效果