定位position总结
1.静态定位static(默认)
static是position属性的默认值。如果省略position属性,浏览器就认为该元素是static定位。
浏览器会按照源码的顺序,决定每个元素的位置。
此时top、bottom、left、right这四个属性无效。
2.相对定位relative
relative表示,相对于默认位置(即static时的位置)进行偏移,即定位基点是元素的默认位置。
属性值:它必须搭配top、bottom、left、right这四个属性一起使用,用来指定偏移的方向和距离。
是否脱标:不脱标,会占据自己原来的位置。
标签的显示模式:保持不变。
应用:多配合绝对定位absolute使用。
3.绝对定位absolute
absolute表示,相对于上级元素(一般是父元素)进行偏移,即定位基点是父元素。
定位基点:定位基点(一般是父元素)不能是static定位,它会一直向上找寻是相对定位relative的祖先节点,若找不到,定位基点就会变成整个网页的根元素html。
属性值:absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。
是否脱标:脱标,不占据自己原来的位置。absolute定位的元素会被"正常页面流"忽略,该元素所占空间为零,周边元素不受影响。
标签的显示模式:行内块inline-block。
应用:轮播图左右标签;弹窗居中等。
案例:
<style>
.father{
position: relative;
width: 800px;
height: 800px;
background-color: pink;
}
.son{
position: absolute;
top: 50%;
left: 50%;
/* margin-top: -100px;
margin-left: -100px; */
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
<body>
<div class="father">我是父元素400*400
<div class="son">我是子元素200*200</div>
</div>
</body>
4.固定定位fixed
fixed表示,相对于视口(viewport,浏览器窗口)进行偏移,即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化,好像固定在网页上一样。
定位基点:视口(viewport,浏览器窗口)。
属性值:如果搭配top、bottom、left、right这四个属性一起使用,表示元素的初始位置是基于视口计算的,否则初始位置就是元素的默认位置。
标签的显示模式:行内块inline-block。
应用:固定头部/底部;固定侧边导航栏等。
案例:
<style>
.toolbar{
position: fixed;
bottom: 0;
/* left: 0; */
width: 100%;
height: 50px;
background-color: pink;
}
.content{
width: 100%;
height: 1500px;
background-color: skyblue;
}
</style>
<body>
<div class="content">我是一堆废话</div>
<div class="toolbar">
我是固定在视口底部的工具栏
</div>
</body>
5.粘性定位sticky
sticky会产生动态效果,很像relative和fixed的结合:一些时候是relative定位(定位基点是自身默认位置),另一些时候自动变成fixed定位(定位基点是视口)。
定位基点:自身默认位置和视口(viewport,浏览器窗口)。
属性值:sticky必须搭配top、bottom、left、right这四个属性一起使用,不能省略,否则等同于relative定位,不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离",浏览器把它当作sticky的生效门槛。
具体规则:当页面滚动,父元素开始脱离视口时(即部分不可见),只要与sticky元素的距离达到生效门槛,relative定位自动切换为fixed定位;等到父元素完全脱离视口时(即完全不可见),fixed定位自动切换回relative定位。
标签的显示模式:行内块inline-block。
应用:搜索栏随着页面滑动再定位至顶部。
案例:
<style>
.wrap{
width: 100%;
height: 800px;
}
.head{
height: 100px;
background-color: skyblue;
}
.search{
position: sticky;
top: 0px;
height: 50px;
background-color: pink;
}
.content{
height: 650px;
background-color: greenyellow;
}
.bullshit{
height: 1000px;
background-color: red;
}
</style>
<body>
<div class="wrap">
<div class="head">我是头部</div>
<div class="search">我是搜索栏
<input type="text">
</div>
<div class="content">我是内容</div>
</div>
<div class="bullshit">我是废话</div>
</body>
上面代码中,页面向下滚动时,search的父元素开始脱离视口,一旦视口的顶部与search的距离小于等于0px(门槛值),search就自动变为fixed定位,保持与视口顶部0px的距离。页面继续向下滚动,父元素wrap彻底离开视口(即整个父元素完全不可见),search恢复成relative定位。
6.堆叠层级z-index
默认效果:如不设置z-index,则按照标签的书写顺序,后来者居上
作用:设置position定位元素的层级顺序,改变元素定位的显示顺序
属性值:整数数字(默认值为0,可取负数,取值越大,层级越高)