跳到主要内容

position

  • 默认情况下，固定定位元素和绝对定位元素的位置是相对于浏览器而言，而相对定位元素的位置是相对原始位置而言。这里注意一个前提——默认情况下
  • position 属性一般配合 top 、 bottom 、 left 和 right 来使用。只有元素定义 position 属性（除了 static ）之后， top 、 bottom 、 left 和 right 才生效
  • top 、 bottom 、 left 和 right 这四个属性不一定全部都用到
  • " position:absolute "会将元素转换为块元素
position: static | relative | absolute | fixed;
  • static: 默认值，每个元素的位置由文档结构中的位置决定
  • relative: 对象参照自身在文档流中的位置，通过 left 、 right 、 top 、 bottom 进行位移，且不影响其它元素。相对定位是在静态定位和绝对定位之间的一个平衡点，让定位对象既不脱离文档流，又可以偏离原始位置
  • absolute: 对象脱离文档流，此时参照自身最近的定位的祖先元素，若没有，则参照 body ，其偏移不影响其它元素
  • fixed ： 与 absolute 一致，但元素以窗口为参考，元素相对窗口固定
position: center | page | sticky;
  • center ： 与 absolute 一致，但偏移位置在盒子中心，盒子在其包容容器垂直水平居中
  • page ： 与 absolute 类似。元素在分页媒体或者区域块中，元素的定位包含框始终是初始包含框
  • sticky: 粘连

想要实现子元素相对父元素定位，是给父元素定义" position:relative; "，然后给子元素定义" position:absolute; "，之后配合 top 、 bottom 、 left 和 right 来定位。

定位包含框​

当包含框设置了 position 为 absolute 、 relative 、 fixed 时，则该包含框具有了定位参照功能。当一个定位对象被多层包含框包裹时，则以最近的（内层）定位包含框为参照。

层叠顺序​

z-index: zuto | integer;

默认情况下，元素 z-index 属性值为 auto 。 z-index 值为正数的元素在 z-index 值为 0 的上面， z-index 值为负数的元素在 z-index 值为 0 的下面。无论是正数还是负数， z-index 值较大的元素会叠加在 z-index 值较小的元素之上。如果 z-index 值相同，则遵循"后来者居上"规则来叠加。

层叠上下文​

元素排序。

calc 方法​

通过使用该方法来自动计算元素的宽度、高度等数值类型的样式属性值。

calc() 方法的另一个妙用是可以用来对各种不同的计数单位进行混合运算。