这是我参与「第四届青训营 」笔记创作活动的第七天
介绍
position是我们用来排版的主要手段。常用的值为relative和absolute
关于浮动和定位的层级关系
有下面几个问题
- 浮动盒子如何实现层级关系
加上定位属性，也不用加上z-index，因为定位元素比浮动元素高半格
- 定位盒子如何实现层级关系
使用z-index，当然前提是父元素也有定位属性
- 浮动与定位的关系
浮动盒子的定位相当于提高半层层级，而定位的盒子提高了一层，所以有定位的元素会遮挡住浮动元素。如果你想要浮动元素遮住定位的元素，可以直接给浮动元素加上定位relative比较合适，再加上z-index。注意两者并不冲突
- 关于z-index的问题，z-index切记不要使用-1，不然会有一定的问题，这是因为为-1的时候，其层级会比父元素还低，也就是如果父元素有背景颜色的时候，会被遮住
属性
- 相对定位relative
- 粘性定位sticky
- 绝对定位absolute fixed
定位元素总介绍
除了stastic其他三个元素都是定位元素，都可以使用top，left,right,bottom进行定位
相对定位relative
此属性会在不改变当前页面排版的前提下进行位置变化，我是这么理解的元素在添加该元素后会在基础的渲染后进行相对之前元素位置而进行改变。
粘性定位sticky
-
相当于relateive和fixed的结合，主要用于监听scroll事件，当该元素距离其父元素的距离达到指定的top,left.right,bottom其中之一的距离时，触发fixed
-
条件
-
父元素不能有overflow:hidden;auot
-
指定四个方向一个
-
父元素高度必须大于子元素高度
-
仅在父元素内生效
-
sticky正如它的描述是relateive变成fixed
-
所以不能使用绝对定位的形式来写
-
特点就是一旦触发fixed，其原来的位置会为背景颜色
绝对定位absolute
经典定位方式，因为我们经常使用它来定位，不过在响应式用得比较少，不过我想应该是可以用，只不过应该把数值改成百分比或em
使用条件，相对最近的拥有非stastic的父元素进行定位。其实都是使用relative和absolute。
特点是完全脱离文档流。float的特点是脱离文档流，但不脱离文本流。
这导致它一开始就不会被其他非定位的元素给看见。
绝对定位fixed
用得比较多的地方在类似京东的侧边栏和上面的导航栏。它跟absolute一样是绝对定位，但是它是相对整个浏览器窗口的，不是相对于最近的父元素。
