position属性规定应用于元素的定位方法的类型(static、relative、absolute、 fixed或 sticky)。
1.静态定位static
HTML 元素默认情况下的定位方式为 static(静态定位)。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
{ position:static; }
2.相对定位relative(不脱标)
相对定位是元素在移动位置的时候,相对于它原来的位置来说的。
{
position:relative;
left:30px;
}
相对定位的特点:(务必记住)
1.它是相对于自己原来的位置来移动的( 移动位置的时候参照点是自己原来的位置)
2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来位置)
3.绝对定位absolute(脱标)
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的
{ position:absolute; }
绝对定位的特点:
1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document 文档)。
2.如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置。(脱标)
4.固定定位fixed(脱标)
固定定位是元素固定于浏览器可视区的位置。主要使用场景: 可以在浏览器页面滚动时元素的位置不会改变。
{ position:fixed; }
固定定位的特点:(务必记住)
1.以浏览器的可视窗口为参照点移动元素。
a.跟父元素没有任何关系
b.不随滚动条滚动。
2.固定定位不在占有原先的位置。(脱标)
5.粘性定位sticky
粘性定位可以被认为是相对定位和固定定位的混合。
{ position:sticky ; }
粘性定位的特点:
1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
2.粘性定位占有原先的位置(相对定位特点)
3.必须添加 top 、left、right、bottom 其中一个才有效
跟页面滚动搭配使用。 兼容性较差,IE 不支持。
<style>
body{
height: 3000px;
}
.nav{
position: sticky;
top: 0;
width: 500px;
height: 50px;
background-color: pink;
margin: 100px auto;
}
</style>
<div class="nav">我是导航栏</div>
总结
定位模式 | 是否脱标 | 移动位置 |
---|---|---|
静态定位static | 不脱标 | 不能使用边偏移 |
相对定位relative | 不脱标 | 相对于自身位置移动 |
绝对定位absolute | 脱标 | 带有定位的父级 |
固定定位fixed | 脱标 | 浏览器可视区 |
粘性定位sticky | 不脱标 | 浏览器可视区 |
定位叠放次序 z-index
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用 z-index 来控制盒子的前后次序 (z轴)
语法:
选择器 { z-index: 1; }
数值可以是正整数、负整数或 0, 默认是 auto,数值越大,盒子越靠上
如果属性值相同,则按照书写顺序,后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性