知识点导航

* position (定位)
   + static
   + relative
   + absolute
   + fixed
   + z-index

一、静态定位<p>

static 无特殊定位, 他是 html 元素默认的定位方式, 即我们不设定元素的 position 属性时的默认值. 它 遵循标准文档流, top, right, bottom, left, z-index 等属性均是无效的.

position 的 static 属性值用的比较不多, 一般用于覆盖之前的 position 值, 比如: 让 fixed 的元素 static, 导航栏的悬停效果可以用这种方式实现

二、相对定位<p>

让元素相对自己 原来 的位置,进行位置调整.

相对定位

当你需要对一个盒子的位置进行调整时,可以使用相对定位:

position: relative; //必须先声明自己要相对定位了,然后再相对自己原来的位置进行调整
top: 150px;
left: 100px;

相对定位不脱标, 老家留坑<p>

相对定位 不脱标, 它的真实位置依旧在原来的位子,只不过浏览器把它渲染到你调整后的位置去了,相对定位其实是个假象.

不脱标 老家留坑

用途<p>

相对定位有坑,在标准流中总是占有一席之地, 所有一般不会用做"压盖"效果,因为总要给它留坑, 比较烦.一般有两方面的用途:

1.微调元素 //相对自己原来的位置做一些调整
2.做绝对定位的参考 ( 子绝父相 )

三、绝对定位<p>

绝对定位

绝对定位脱标<p>

绝对定位的盒子是 脱离标准流 的. 所以只要一个盒子绝对定位了, 就不具备标准流当中的性质了,标签再无行内或块级元素之分, 即 不需要 display: block 就可以设置宽高了.

span {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
}

参考点<p>

绝对定位的参考点有两种:

1. 用 top 来描述: 参考点是页面的左上角,而不是浏览器的左上角
2. 用 bottom 来描述: 参考点是浏览器首屏窗口左下角对应于页面的位置

用 top 来描述:

此时定位的参考点是 页面的左上角, 而不是浏览器的左上角

top

用 bottom 来描述:

此时的定位参考点就是 浏览器首屏窗口的左下角对应于页面的位置.
如果页面向上移了 100px, 那么 浏览器 首屏 窗口左下点所对应的页面的位置也会向上移 100px, 故用 bottom 来描述绝对定位位置的元素也会上移 100px.

bottom

面试题

题目

答案: 用 bottom 来描述绝对定位的位置时, 它的参考点是 浏览器首屏窗口左下点所对应的页面的位置

答案

以盒子为参考点<p>

一个绝对定位的元素,它会往父辈元素中一层层的追溯, 找到 第一个 position 不为 static 的父辈元素 并相对这个父辈元素定位; 如果没有, 则相对 document 定位.
也就是说, 一个绝对定位的元素, 如果父辈元素中出现了定位的元素, 那么将以这个定了位的父辈元素为参考点.

子绝父相

参考盒子说明( 第一个 position 不为 static 的父辈元素 ):
1. 已定位的父辈元素可能是父亲元素, 也可能是 爷爷元素.
2. 不一定是相对定位, 只要不是 static 的定位就可以( 子绝父绝, 子绝父相, 子绝父固 )
3. 绝对定位的子元素可以无视参考盒子的 padding

示例:
橙色部分是 div 的 border, 绿色部分是 div 的 padding, 蓝色部分是 div 的内容区域, 红色部分是 p, 此时为 div 相对定位, p 为绝对定位, p 会无视父亲元素的 padding, 以 border 内侧为参考点进行定位

绝对定位的子元素可以无视参考盒子的 padding

绝对定位盒子的居中<p>

绝对定位之后, 它会脱离标准流, 所有标准流的规则都将不适用, 故 margin: 0 auto; 失效.

解决方案:

width: 600px;
height: 60px;
position: absolute;
top: 0;
left: 50%;             //左边距为 页面的一半
margin-left: -300px;   //margin 设为 负的宽度的一半

left: 50%; margin-left: 负的宽度的一半;

四、固定定位<p>

固定定位就是 相对浏览器窗口定位. 页面如何滚动,这个盒子显示的位置都不变. !!! 固定定位脱标, 并且 IE 6 不兼容

固定定位

五、z-index<p>

  z-index: 988; //没有单位的正整数

* 只有定了位的元素才有 z-index 值.( 相对定位, 绝对定位, 固定定位 ) 
* z-index 值表示深度. 数值大的压盖住数值小的
* z-index 值没有单位, 它就是一个正整数. 默认值为 0 
* 如果都没有 z-index 值, 那么哪个标签后写,哪个标签能盖住其它标签. 定了位的元素永远能压住没有定位的元素.
* 从父现象: 如果父亲元素被盖了, 儿子再牛逼也没用

从父现象