css中的定位

css中有三种基本的定位机制：普通流、浮动流、定位流

1、普通流：上下排列的布局 （大部分情况）

2、浮动流：左右排列的布局 （大部分情况）

3、定位流：层叠（叠加）排列布局（大部分情况）

定位属性

position：检索或设置对象的定位方法

• static ：默认值，没有定位，可以用于取消元素之间的定位设置

• relative：相对定位（参照物是自身所在的位置）

  • 如果没有定义偏移量，对元素本身没有任何影响

  • 不使元素脱离文档流，空间是会保留

  • 不影响其他元素布局

  • left、top、right、bottom是相对于当前元素自身进行偏移，不能独自存在，必须配合定位元素进行使用

• absolute：绝对定位（参照物：包含块-该元素的祖先级元素）

  • 使元素完全脱离文档流

  • 使内联元素支持宽高（让内联具备块特性）

  • 使块元素默认宽根据内容决定（让块具备内联属性）

  • 如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

    • 注：如果祖先元素中有多个元素具备定位属性，那么是以离自己最近的祖先元素进行偏移

  • 注：默认情况下是相对于可视窗口进行定位的。

  • 包含块：包含块是绝对定位的基础

    • 绝对定位元素会根据包含块进行绝对定位，默认情况下，浏览器的可视窗口是一个大的包含块，默认情况下，绝对定位元素会相对浏览器的可视窗口进行定位；如果他的祖先级元素定义里包含块，那他就最近的祖先级元素进行绝对定位。

    • 如何给祖先级元素定义成包含块：给祖先级元素添加position：relative/absolute/fixed。

• 绝对定位和相对定位的区别

  • 1、相对定位的参照物是自己本身所在的位置，绝对定位的参照物是包含块

  • 2、相对定位是不会脱离文档流的，而且不会对页面的布局产生影响；绝对定位是会脱离文档流的，之前的位置就不再占用，后面的内容会把位置补上去

• z-index：auto/ number 检索或设置对象的层叠顺序

  • auto：默认值

  • number：无单位的整数值。可为负数

  • 没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上

  • 注：他只针对具有定位属性的元素起作用

• fixed：固定定位（参照物：始终都是相对于整个浏览器窗口进行固定定位的）

  • 使元素完全脱离文档流

  • 是内联元素支持宽高(让内联具备内联块属性)

  • 使块元素默认宽根据内容决定（让内联具备内联块属性）

  • 相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响，不会受到祖先元素的影响

• sticky 黏性定位

  • 在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定模式。

  • 只支持top和left方向

  • 设置了sticky的元素，在屏幕范围时该元素的位置并不受定位影响（设置top、left等属性无效），当该元素的位置将要移出偏移范文时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。