HTML5 position定位详解

定位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 其余的一概不管 如图

如有不对还请不要吝啬也不要跟我客气 该指出指出 该骂就骂 谢谢