父相子绝
相对定位:position: relative;
相对定位:该元素相对于自己原本文档中的位置,偏移一定距离,相对的自己。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style type="text/css">
.div2{
width: 300px;
height: 300px;
background-color: blue;
position: relative;/*相对定位*/
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<p>1111</p>
<p>1111</p>
<p>1111</p>
<div class="div2">
相对定位
</div>
</body>
</html>
效果图:
绝对定位:position:absolute
绝对定位:该元素相对于其父元素,偏移一定距离。相对的是父元素,重点是这个父元素也需要是设置了position属性。从最近的父元素开始找,直到找到body位置为止。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style type="text/css">
#div1{
width: 300px;
height: 300px;
background-color: red;
position: absolute;/*绝对定位*/
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<p>1111</p>
<p>1111</p>
<p>1111</p>
<div id="div1">
绝对定位
</div>
</body>
</html>
显示效果:
被设置了绝对定位的元素,在文档流中是不占据空间的,如果某元素设置了绝对定位,那么它在文档流中的位置会被删除,那这个元素到哪去了呢?它浮了起来,其实设置了相对定位relative时也会让该
元素浮起来,但它们的不同点在于,相对对定位不会删除它本身在文档流中占据的那块空间,而绝对定位则会删除掉该元素在文档流中的位置,完全从文档流中抽了出来,我们可以通过z-index来设置它们的堆叠顺序。那么绝对定位是如何定位的呢?首先,如果它的父元素设置了除static之外的定位,比如position:relative,或者position:absolute以及position:fixed,那么它就会相对于它的父元素来定位,位置通过left
, top ,right ,bottom属性来规定,如果它的父元素没有设置定位,那么就得看它父元素的父元素是否有设置定位
,如果还是没有就继续向更高层的祖先元素类推,总之它的定位就是相对于设置了除static定位之外的定位(比如position:relative)的第一个祖先元素,如果所有的祖先元素都没有以上三种定位中的其中一种定位,那么它就会相对于文档body来定位(并非窗口,相对于窗口定位的是fixed)
绝对定位的元素相对于谁来定位,我们就把这个"谁"叫着参照物: