CSS Position(定位)
除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 HTML 中的位置决定。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
position 属性指定了元素的定位类型。
position 属性的五个值:
- static
- relative
- fixed
- absolute
- Inherit
元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。
① static 定位
HTML元素的默认值,即没有定位,元素出现在正常的流中。
静态定位的元素不会受到 top, bottom, left, right影响。
position:static;
② fixed 定位
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。元素的位置相对于浏览器的位置是固定位置。即使窗口是滚动的它也不会滚动。
position:fixed;
top:30px;
注意: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.
Fixed定位使元素的位置与文档流无关,因此不占据空间。
Fixed定位的元素和其他元素重叠。
③ relative 定位
相对定位元素的定位是相对其正常位置。
position:relative;
left:-20px 或 right:20px; /*相对于其正常位置向左移动20px*/
left:20px; /*相对于其正常位置向右移动20px*/
可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
④ absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于body。
absolute定位使元素的位置与文档流无关,因此不占据空间。
position:absolute;
left:100px 或 right:-100px; /*距离左边的页面100px*/
top:140px; /*距离页面的顶部150px*/
⑤ Inherit 定位
继承父元素的position值。
图文讲解
首先设置4个div:
<body>
<div class="div1">第一个div</div>
<div class="div2">第二个div</div>
<div class="div3">第三个div</div>
<div class="div4">第四个div</div>
</body>
添加背景色,效果如下:
给第二个div设置absolute:
.div2{
height:100px;
background-color: blueviolet;
position:absolute;
top:50px;
left:50px;
}
效果如图:
第二个div设置了absolute,则该div的宽度就由文本决定,且下面的div会上移占据之前第二个div的位置,top和left是相对于离它最近且不是static定位的父元素来定位的,在此div2因为没有父元素,所以第二个div相对于根元素即html元素来定位。
将第二个div设置为relative:
.div2{
height:100px;
background-color: blueviolet;
position:relative;
left:50px;
top:50px;
}
设置relative的div不会影响其他div的位置,且top和left是相对于它原本自身的位置来定位。
总结:
Absolution:元素会脱离文档流,定位是相对于离它最近的且不是static定位的父元素而言,若该元素没有设置宽度,则宽度由元素里面的内容决定,且宽度不会影响父元素,定位为absolution后,原来的位置相当于是空的,下面的的元素会来占据。
Relative:元素仍处于文档流中,定位是相对于原本自身的位置,若没有设置宽度,则宽度为父元素的宽度,该元素的大小会影响父元素的大小。
z-index 属性
元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素。
z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)。
一个元素可以有正数或负数的堆叠顺序。
position:absolute; left:0px; top:0px; z-index:-1;
属性值
值 | 描述 |
---|---|
auto | 默认。堆叠顺序与父元素相等。 |
number | 设置元素的堆叠顺序。 |
inherit | 规定应该从父元素继承 z-index 属性的值。 |
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意: 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。