CSS 定位position

目录

　　CSS 定位

　　CSS relative相对定位

　　绝对定位

　　固定定位

　　粘性定位

　　定位堆叠顺序

　　定位特殊特性

CSS 定位

position 属性指定了元素的定位类型。

postion 属性的5个值：static relative fixed absolute sticky。

元素可以使用的top，bottom，left 和 right 属性定位。

static 静态定位

HTML元素默认情况下的定位方式为static（静态）。

静态定位的元素不受top bottom left right属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。

列如：

div {
    position: static;
    width: 100px;
}

fixed 定位

position: fixed; 的元素是相对浏览器窗口时固定位置。即使窗口是滚动的它也不会移动。

列如：

div.fixed {
   position: fixed;
   top: 50px;
   right: 50px;
}

relative 定位

position: relative; 相对定位元素的定位是相对其正常位置。

移动相对定位元素，但它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块

absolute 定位

绝对定位元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于《html》

absolute 定位使元素的位置于文档流无关，因此不占用空间。

absolute 定位的元素和其他元素重叠。