文章目录
一:position的使用
position:absolute和left,right,top,bottom配合使用,left和right只写一个,top和bottom也只写一个,
假如left:100px,就是div的左边框线距离左边浏览器边框100px,right:100px是div的右边框线距离右边浏览器边框100px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
</body>
<style>
div{
position:absolute;
right: 100px;
bottom: 100px;
width: 100px;
height: 100px;
background-color:pink;
}
</style>
</html>
二:层模型
absolute脱离原来位置进行定位
1.没用absolute,div不会重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="demo"></div>
<div class="box"></div>
</body>
<style>
.demo{
width: 100px;
height: 100px;
background-color:pink;
}
.box{
width: 100px;
height: 100px;
background-color:indigo;
}
</style>
</html>
2.使用absolute,脱离原来的层面
当一个元素加了绝对定位之后,它就脱离了原来的层,跑到上一个层.所以在原来的层空了,别人就上去了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="demo"></div>
<div class="box"></div>
</body>
<style>
.demo {
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
}
.box {
width: 200px;
height: 200px;
background-color: indigo;
}
</style>
</html>
三:相对定位的使用
1.relative保留原来位置进行定位,只写position:relative,div不会重叠,加上left等,就会保留原来位置进行定位
2.相对自己原来的位置进行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="demo"></div>
<div class="box"></div>
</body>
<style>
.demo {
position: relative;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: pink;
}
.box {
width: 200px;
height: 200px;
background-color: indigo;
}
</style>
</html>
四:绝对定位和相对定位一起使用
box加上绝对定位后,如果父级有相对定位,则相对最近的有定位的父级进行定位,如果没有,那么相对于浏览器定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="box"></div>
</div>
</div>
</body>
<style>
.wrapper {
position: relative;
margin-left: 100px;
width: 200px;
height:200px;
background-color: pink;
}
.content {
/* position: relative; */
margin-left: 100px;
width: 100px;
height:100px;
background-color:sandybrown;
}
.box {
position: absolute;
left: 50px;
width: 50px;
height: 50px;
background-color: indigo;
}
</style>
</html>
五:
一般情况下,我们使用relative,想要谁做参照物,就对谁设置relative,另外一个设置absolute
六:居中
1.相对于浏览器居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box"></div>
</body>
<style>
.box {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
background-color: indigo;
margin-left: -50px;
margin-top: -50px;
}
</style>
</html>
相对窗口居中把absolute改为fixed即可