布局和定位的区别?
布局是屏幕平面上的
定位是垂直于屏幕的
浮动元素脱离文档流
概述
position
是干嘛的?
position
属性规定元素的定位类型。
position属性有哪些值
sratic
: 默认值,待在文档流中relative
: 相对定位,升起来,但不脱离文档流absolute
: 绝对定位,定位基准是祖先中最近的非static
fixed
: 固定定位,定位基准是Viewport
(有诈)- 后面出了一个属性改变了这个规则
sticky
: 粘滞定位,当要消失时粘在可视区域边不走- 兼容性特别差,几乎不能用了
经验
- 如果写了
absolute
,一般都得补一个relative
- 如果写了
absolute
或fixed
,一定要补top
和left
sticky
兼容性很差
position : relative
相对定位元素的定位是相对其正常位置。 移动相对定位元素,但它原本所占空间不会改变
使用场景
- 用于位移(很少用)
-
配合
z-index
z-index: auto
默认值,不创建新的层叠上下文auto
计算出来的值为 0,但写auto
与写 0 是不一样的
z-index: 0 / 1 / 2
-
经验
不要写
~~x-index: 9999~~
- 学会管理
z-index
position: absolute
absolute
元素的位置与文档流无关,因此不占空间absolute
绝对定位的元素位置相对于最近的已定位父元素, 如果元素没有已定位的父元素,那么它的位置相当于
使用场景
- 脱离原来的位置,另起一层
- 比如对话框的关闭按钮
-
配合
z-index
经验
absolute
是相对于祖先元素中最近的一个定位元素定位的- 什么是定位元素?
position
不是默认值sratic
就是定位元素
- 某些浏览器上如果不写
top / left
会位置错乱 - 善用
left: 100%
; - 善用
left:50%
+负margin
(居中) width-space:nowrap;
文字内容不准换行(以后会经常使用)
position:fixed
元素的位置相对于浏览器窗口是固定位置 即使窗口滚动它也不会移动
使用场景
层叠上下文
比喻
- 每个层叠上下文就是一个新的小世界(作用域)
- 这个小世界里面的
z-index
跟外界无关 -
哪些不正交的属性可以创建层叠上下文
MDN 文档 有写
- 需要记忆的有:
z-index
为 0 时- 处于
flex
时 opacity
不为 1,为零点几时- 有
transform
时会创建层叠上下文
opacity
与 background
的区别 ?
opacity
影响整体所有东西,这也是为什么它可以创建层叠上下文的原因,因为要包住所有东西。background
背景色只影响背景色。