position
2022-08-04 本文已影响0人
冰点雨
position:
static 默认
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘滞定位
绝对定位
当前元素开启绝对定位，父元素开启相对定位
1.png
<style>
.box1{
width: 300px;
height: 300px;
background-color: orange;
/* 父元素开启相对定位 */
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
/* 开启绝对定位 */
position: absolute;
/* 垂直居中 */
/* margin-top: auto;
margin-bottom: auto;
top: 0;
bottom: 0; */
/* 水平居中 */
/* margin-left: auto;
margin-right: auto;
left: 0;
right: 0; */
/* 水平垂直居中 */
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
粘滞定位
开启粘滞定位,使导航栏悬浮在顶部。可设距顶部的距离
<style>
body{
height: 1000px;
}
.nav {
width: 990px;
height: 48px;
margin: 30px auto;
background-color: lightgray;
/* 开启粘滞定位,使导航栏悬浮在顶部 */
position: sticky;
/* 距顶部的距离 */
top: 20px;
}
</style>
<div class="nav"></div>
