position 图文详解

在我们接触html的时候，相信大家总是会遇到这样的问题
1.除了利用边距，可以实现指定位置的放置，还有没有其他方式呢？
2.当我们想让元素实现重叠的时候，应该怎么办 ？

a、定位背景
为了解决当边距实现不了元素放置指定位置的时候，咋整？
b、定位定义
定位顾名思义就是把指定元素放置到指定位置
c、定位功能
只要是你能看到的位置，无所不能

一、默认定位

position: static

默认值。没有定位，元素出现在正常的流中

对应的css：

结果显示：

我们可以很清楚的看到，三个块就是默认位置，所以默认定位是原始位置

二、固定定位

position: fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。可以放在页面任何位置

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

对应的css：

结果显示：

随着页面的滚动，ul的位置不变，所以定位是相对浏览器视窗定位的

三、相对定位

position: relative

生成相对定位的元素，对于自己原始位置进行定位

相对的css：

结果显示：

元素给自己相对定位，经过移动发现其相对自己原来位置定位，移动后不占空间，移动前的空间保留

四、绝对定位

position: absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

对应的css：

结果显示：

相对父元素的定位，给父元素加相对定位，给子块加绝对定位。如果父元素没有，层级往上找，最后到body

五、结论

relative
相对定位，相对自己定位，原始位置保留
新位置不占空间 ，层级变高

absolute
绝对定位，相对于父级元素中最近带有定位属性的元素去定位 ，定位前后都不占位置

fixed
固定定位，相当于浏览器视窗定位

值得注意的是：在absolute定位中，其父级元素，不单是指父亲，而是父亲元素 及以上所有的元素；