定位有三种,分别是相对定位、绝对定位、固定定位。
相对定位:
position:relative;
绝对定位:
position:absolute;
固定定位:
position:fixed;
相对定位
相对定位,就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
>
position 相对定位
</
title
>
<
style
>
p
{
position
:
relative
;
/*向下移动10px*/
top
:
10
px
;
}
span
{
border
:
1
px solid red
;
position
:
relative
;
/*向左移动10px*/
right
:
10
px
;
/*向右移动50px*/
left
:
50
px
;
}
div
{
width
:
200
px
;
height
:
200
px
;
background
:
chartreuse
;
}
</
style
>
</
head
>
<
body
>
<
p
>
11111
</
p
>
<
span
>
22222
</
span
>
<
div
>
4444
</
div
>
</
body
>
TIPs:
相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘。
它原本的位置会一直存在,不会被其他盒子占据。
相对定位用途
相对定位有坑,所以一般不用于做“压盖”效果。页面中,效果极小。
1) 微调元素
2) 做绝对定位的参考,子绝父相(讲绝对定位的时候说)
相对定位的定位值
可以用left、right来描述盒子右、左的移动;
可以用top、bottom来描述盒子的下、上的移动。
Top/bottom;left/right只能同时存在一个
绝对定位
绝对定位的盒子,
是脱离标准文档流的。所以,所有的标准文档流的性质,绝对定位之后都不遵守了。
绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block;就可以设置宽、高了。
参考点
绝对定位的参考点,如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角:
如果用bottom描述,那么就是浏览器首屏窗口尺寸,对应的页面的左下角:
以盒子为参考点
(因为浏览器的大小是不一样的,在浏览器中漂浮在任意位置没有任何意义)
一个绝对定位的元素,如果父辈元素中出现了也定位了的元素,那么将以父辈这个元素,为参考点。
子绝父相:
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
>
子绝父相
</
title
>
<
style
>
.
div1
{
width
:
600
px
;
height
:
600
px
;
background
:
cornflowerblue
;
/*给父元素设置相对定位 子元素绝对定位 可以使得子元素不会脱离标准文档流*/
position
:
relative
;
top
:
100
px
;
left
:
100
px
;
}
.
div2
{
width
:
100
px
;
height
:
100
px
;
background
:
chocolate
;
/
*若绝对定位的子元素有父辈且父辈元素也有一个定位. 那么将以父元素作为参考点。*/
/*父辈元素不一定要相对定位 ,任何一种定位都可以作为参考点
*/
position
:
absolute
;
top
:
200
px
;
}
</
style
>
</
head
>
<
body
>
<
div
class=
"div1"
>
<
div
class=
"div2"
>
22
</
div
>
</
div
>
</
body
>
TIPs:
不一定是相对定位,任何定位,都可以作为参考点
子绝父绝、子绝父相、子绝父固,都是可以给儿子定位的。但是,工程上子绝、父绝,没有一个盒子在标准流里面了,所以页面就不稳固,没有任何实战用途。工程上,“子绝父相”有意义,父亲没有脱标,儿子脱标在父亲的范围里面移动。
绝对定位的儿子,无视参考的那个盒子的padding。
下图中,绿色部分是div的padding,蓝色部分是div的内容区域。那么此时,div相对定位,p绝对定位。
p将无视父亲的padding,在border内侧为参考点,进行定
绝对定位的盒子居中
绝对定位之后,所有标准流的规则,都不适用了。所以margin:0 auto;居中效果失效。
div
{
width
:
200
px
;
height
:
200
px
;
background
:
palevioletred
;
position
:
absolute
;
/*定位绝对定位后 margin: o auto居中属性将会失效*/
/*margin: 0 auto;*/
left
:
50
%;
margin-left
: -
100
px
;
}
固定定位
position:fixed;
固定定位就是相对浏览器窗口定位。无论页面如何滚动,这个盒子显示的位置不变(返回顶部按钮、导航栏等)
固定定位会脱离标准文档流。
用途:
返回顶部按钮
顶部导航条的固定