CSS中页面布局中的定位

一.定位：position

二.可选值：

static：默认值，元素没有开启定位

relative：相对定位

absolute：绝对定位

fixed：固定定位

三.ralative相对定位：

1.开启元素的相对定位后，如果不设置偏移量元素不会发生任何变化

2.相对定位元素相对于其自身在文档流中的位置来定位

3.相对定位的元素不会脱离文档流

4.相对定位不会改变元素的性质，块元素依然是块元素，内联元素依然是内联元素

5.相对定位的元素会提升一个层级

四.absolute绝对定位：

1.绝对定位后，不设置偏移量元素位置不会变化

2.绝对定位的元素是相对于距离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没开启定位，则相对于浏览器窗口进行定位

3.绝对定位的元素完全脱离文档流

4.绝对定位会改变元素的额性质。内联变成块级，块的高度和宽度都被内容撑开，并且不独占一行

5.绝对定位会使元素提升一个层级

五.fixed固定定位：

1.固定定位是一种特殊的绝对定位，它的特点大部分和绝对定位一样

2.不同的是固定定位的元素永远都是相对于浏览器窗口进行定位的，并且不会随浏览器滚动条滚动

六.层级关系：

1.定位元素 > 浮动元素 >文档流中的元素

2.当元素定位开启后，可以通过z-index来设置元素层级

3.z-index值越高越优先显示

4.如果z-index值一样，或者都没有z-index，则优先显示下边的元素

5.父元素永远不会盖住子元素