定位position 他的参数有 绝对absolute 、固定fixed、 继承inherit、 相对relative、 静止static、 粘的sticky；
常用的有：绝对absolute 、固定fixed、相对relative；
你没有用定位时他的参数默认是 静止static;
那么我们开始用一个一个来
1.绝对定位 position：absolute;
这是一个对上一级进行定位的值
演示
最开始三个盒子的位子 此时没有给任何可以干预他们位置的样式
当我对最里面的盒子使用了绝对定位position: absolute;后的位置
他的上一级没有position这个样式、所以一直向上查找直到找到带有position的直系元素、否则找到最上一级标签body 此时便是相对于body的移动
此时我给id为box1的盒子设置了一个相对定位 所以他就相对于box1绝对定位了 如下图
我想说一句 我在网页上看见有人说他的父元素或者直系向上的元素 必须要是position: relative相对定位 才能定位 我试验了一下 除了他的父元素或者直系向上的元素定位等于position:static时 全都是可以定位的 如下图
那么如果我设置了top并且也设置了bottom 或者我既设置了left又设置了right那么它到底引用哪一个值呢
很明显 他只引用了 top 和left
2.相对定位 position: relative
相对定位是相对于自身原来的位置进行定位
如图 最开始的位置
移动后的位置 如图
3.固定定位 position: fixed;
相对于可视区域的一个定位 不管你屏幕如何变化他始终在哪个位置 它不占任何位置 且会浮起 如下图
始终是相对于右边边框的一个定位 且不会和里面的元素相互挤压 而是相互重叠 且它浮动到上方
4.继承 position: Inherit;
继承父元素的position的类型 如下图
如果父元素没有position那么他就会默认为static静止 切记是父元素 他爷爷有没有position跟它没有关系
5. 粘的 position: sticky;
sticky英语是 粘的
具体的就是 不管你如何操作 他都无法超出他的父元素 并且他直接受两个值 一个是top 一个是left 其余的一概不管 如图
如有不对还请不要吝啬也不要跟我客气 该指出指出 该骂就骂 谢谢