div分层
从上到下顺次分为:
- 内联子元素
- 浮动元素 脱离文档流
- 块级子元素 块级元素若文字呈现重叠的状况,是以文字呈现的先后顺序进行笼罩
- border
- background
新属性-position
属性值:
- static默认值,待在文档流里。
- relative绝对定位,升起来,但不脱离文档流
- absolute相对定位,定位基准是先人里的非static 比方敞开按钮 留神:应用absolute,其父元素须要加relative
备注:元素会被移出失常文档流,并不为元素预留空间,通过指定元素绝对于最近的非 static 定位先人元素的偏移,来确定元素地位。 - fixed固定定位,定位基准是viewport 手机上尽量不要应用这个属性
元素会被移出失常文档流,并不为元素预留空间,而是通过指定元素绝对于屏幕视口(viewport)的地位来指定元素地位。 - sticky粘滞定位
默认每个元素的z-index是auto,而auto计算出来的值为0.
white-space:nowrap; --文字内容不准换行
层叠上下文
层叠上下文造成条件(须要记忆):
- 根元素(html)
- z-index不为auto的相对/绝对定位
- opacity属性小于1的元素
- transform的值不为none的元素
- 一个z-index值不为auto的flex我的项目,即父元素 display:flex;
- 固定定位元素和sticky定位元素