定位
检索和设置对象的定位方式
属性：position
属性值：
1：static 默认值
2：relative 相对定位
3：absolute 绝对定位
4：fixed 固定定位
5：sticky 粘性定位
相对定位
a：根据自身位置定位
b：配合top，right，left，bottom使用
c:不会脱离文档流，占位
绝对定位
a:根据最近有定位的父元素,如果父元素没有定位则参考根元素(html)
b:配合top，left，right，bottom使用
c:会脱离文档流，不占位
d:层级顺序z-index，数字越大在上层显示，默认为0,可以写负值,需配合定位使用
f:子绝父相
固定定位
a:根据浏览器窗口定位
b:配合top，right，left，bottom使用
c:不论窗口是否滚动，元素会固定在位置上
粘性定位
a:position：relative和position：fixed的结合体，当元素在屏幕内，表现为relative，
当元素要滚出显示器屏幕的时候，表现为fixed
元素水平居中的方法
1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: slateblue;
position: relative;
}
\
.box1{
width: 100px;
height: 100px;
background-color: turquoise;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: slateblue;
position: relative;
}
\
.box1{
width: 100px;
height: 100px;
background-color: turquoise;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
3:弹性盒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: slateblue;
display: flex;
justify-content: center;
align-items: center;
}
\
.box1{
width: 100px;
height: 100px;
background-color: turquoise;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
4:平移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: slateblue;
position: relative;
text-align: center;
line-height: 300px;
}
\
.box1{
width: 100px;
height: 100px;
background-color: turquoise;
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<span></span>
</div>
</body>
</html>
5:网格布局
<style>
.box{
width: 300px;
height: 300px;
background-color: slateblue;
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-template-areas: ". . ." ". a ." ". . .";
}
\
.box1{
width: 100px;
height: 100px;
background-color: turquoise;
grid-area: a;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<span></span>
</div>
</body>
