position包含如下4个属性
1.relative
2.absolute
3.fixed
4.static
absolute绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
*{
border: 0px;
padding: 0px;
margin: 0px;
}
body{
background-color: #FFF3F3;
}
.test{
width: 10vw;
height: 10vh;
background-color: #0000FF;
}
.test1{
width: 10vw;
height: 10vh;
background-color: #FF0000;
}
.test2{
width: 10vw;
height: 10vh;
background-color: #F0F400;
}
</style>
<body>
<div class="test" >
</div>
<div class="test1">
</div>
<div class="test2">
</div>
</body>
</html>
正常情况下如下
image.png
当将其中一个元素设置absolute时效果如下,该元素已经脱离文档流（正常的应该从上到下）。
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
*{
border: 0px;
padding: 0px;
margin: 0px;
}
body{
background-color: #FFF3F3;
}
.test{
width: 10vw;
height: 10vh;
background-color: #0000FF;
left: 1rem;
position: absolute;
}
.test1{
width: 10vw;
height: 10vh;
background-color: #FF0000;
}
.test2{
width: 10vw;
height: 10vh;
background-color: #F0F400;
}
</style>
<body>
<div class="test" >
</div>
<div class="test1">
</div>
<div class="test2">
</div>
</body>
</html>
不过此属性如果其最近父级元素已经设置了absolute或者是relative时，则定位是相对于该父元素设置，如果没有则相对于body
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
*{
border: 0px;
padding: 0px;
margin: 0px;
}
body{
background-color: #FFF3F3;
}
.divtest{
width: 50vw;
height: 50vh;
position: absolute;
left: 25px;
top: 25px;
background: #000000;
}
.test{
width: 10vw;
height: 10vh;
background-color: #0000FF;
left: 1rem;
position: absolute;
}
.test1{
width: 10vw;
height: 10vh;
background-color: #FF0000;
}
.test2{
width: 10vw;
height: 10vh;
background-color: #F0F400;
}
</style>
<body>
<div class="divtest" >
<div class="test" >
</div>
<div class="test1">
</div>
<div class="test2">
</div>
</div>
</body>
</html>
----------------------------------------------------华丽的分割线---------------------------------------------------------------
当将其中一个元素设置relative时，则是相对于最近的设置过absolute的元素偏移，但其设置的宽高任然保留占据其位置。
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
*{
border: 0px;
padding: 0px;
margin: 0px;
}
body{
background-color: #FFF3F3;
}
.divtest{
width: 50vw;
height: 50vh;
position: absolute;
left: 25px;
top: 25px;
background: #000000;
}
.test{
width: 10vw;
height: 10vh;
background-color: #0000FF;
left: 1rem;
top: 1rem;
position: relative;
}
.test1{
width: 10vw;
height: 10vh;
background-color: #FF0000;
}
.test2{
width: 10vw;
height: 10vh;
background-color: #F0F400;
}
</style>
<body>
<div class="divtest" >
<div class="test" >
</div>
<div class="test1">
</div>
<div class="test2">
</div>
</div>
</body>
</html>
----------------------------------------------------华丽的分割线----------------------------------------------------------
当元素设置为fixed属性时，与absolute属性效果差不对，但是fixed是相对于body元素绝对定位。和最近的父级元素没有任何关系。
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
*{
border: 0px;
padding: 0px;
margin: 0px;
}
body{
background-color: #FFF3F3;
}
.divtest{
width: 50vw;
height: 50vh;
position: absolute;
left: 25vw;
top: 25vh;
background: #000000;
}
.test{
width: 10vw;
height: 10vh;
background-color: #0000FF;
left: 1rem;
top: 1rem;
position: fixed;
}
.test1{
width: 10vw;
height: 10vh;
background-color: #FF0000;
}
.test2{
width: 10vw;
height: 10vh;
background-color: #F0F400;
}
</style>
<body>
<div class="divtest" >
<div class="test" >
</div>
<div class="test1">
</div>
<div class="test2">
</div>
</div>
</body>
</html>
----------------------------------------------------华丽的分割线----------------------------------------------------------
当元素设置为static时，没有任何实质影响，这是position的默认值、
网友评论