先写一段简单代码:
<!
DOCTYPE html
>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"ie=edge"
>
<
link
rel
=
"stylesheet"
href
=
"try.css"
>
<
title
>
Document
</
title
>
</
head
>
<
body
>
<
div
class
=
"try"
></
div
>
<
div
class
=
"try1"
>
<
div
class
=
"try2"
></
div
>
</
div
>
</
body
>
</
html
>
.try
{
width
:
100px
;
height
:
100px
;
background-color
:
#f40
;
}
.try1
{
width
:
100px
;
height
:
100px
;
background-color
:
navajowhite
;
top
:
0px
;
}
.try2
{
width
:
50px
;
height
:
50px
;
background-color
:
red
;
/* position: relative; */
border
:
1px
solid
red
;
bottom
:
50px
;
}
先将position:relation相对定位注释, 然后取消注释,既加上相对定位,
可以看到。 可以看到。
这里设置的是bottom:50px; 然而此时
try2是相对于父级
try1
,
由此可见,此时的bottom是我们try2上边框下部,与父级上边框下部的距离。同时测试了一下right也是一样的道理。
然后将relation改为absolute(改为绝对定位), bottom改为right;可以看到。
相对定位是相对于页面的。
绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body)。
而如果在.try1中加入relative,
如果在.try1中加入absolution,
可以看到 可以看到
由此可见
绝对定位本身与文档流无关,因此不占空间,普通文档流中的元素的布局就当绝对定位的元素不存时一样,所以 它们可以覆盖页面上其他的元素,且可以通过z-index属性来控制这些层的对方顺序(就像车在高架桥上一样桥上和桥下互不影响)。
而相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框(不能撞车!)。