CSS知识整理(六) 定位

CSS知识整理(六) 定位

目录

CSS知识整理(六) 定位

一、相对定位

二、绝对定位

三、固定定位

四、z-index

---

定位就是让元素块出现在合适的位置，这就需要我们以一定的参照物进行进行定位，分为相对定位，绝对定位，固定定位，这一块原理比较简单。

一、相对定位

相对原来的位置进行偏移，原来的位置就是指文档流的位置。

position: relative;

{
    position:relative;
    top:200px;
    left:500px
}

二、绝对定位

1.没有已定位父级元素下，相对于浏览器定位

2.存在已定位父级元素，相对于元元父级元素进行定位

三、固定定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

四、z-index

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），也就是图层。

一个元素可以有正数或负数的堆叠顺序：

img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

z-index越大，则越在上层显示。