定位
元素的定位一般分为相对定位、绝对定位和固定定位三种。
实现定位效果我们一般使用 position
属性,该属性有以下值供我们调用
-
static
:默认值。位置设置为 static的元素,它始终会处于文档流给予的位置。 -
inherit
:规定应该从父元素继承 position 属性的值。但是任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。 -
fixed
:生成固定定位的元素。默认情况下,可定位于相对于浏览器窗口的指定坐标。- 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
- 不论窗口滚动与否,元素都会留在那个位置。但当父元素具有transform属性且不为none时,就会相对于父元素指定坐标,而不是浏览器窗口。
- 该值会使元素脱离文档流
-
absolute
,生成绝对定位的元素,相对于距该元素最近的已定位的父元素进行定位。- 此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。
- 该值会使元素脱离文档流
-
relative
:生成相对定位的元素,相对于该元素在文档中的初始位置进行定位。-
通过 “left”、”top”、”right” 以及 “bottom” 属性来设置此元素相对于自身位置的偏移。
-
相对定位
相对定位使用 position
属性的 relative值来实现。
定义后我们可以使用 “left”、”top”、”right” 以及 “bottom” 属性来使该元素相对于自身位置进行偏移。
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
我们尝试一下实现
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
.all{
width: 300px;
height: 300px;
border: 3px solid red;
}
p{
margin: 0;
width: 100px;
height: 100px;
background: #ffcae4;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="all">
<p>我是p元素</p>
</div>
</body>
使用position
的 relative值使p元素的位置进行偏移
position: relative;
right: 50px;
定义完后,想象中的偏移效果应该是会向右边偏移50px
但实际上 它会向左偏移50px
这理解起来也很简单,我们直接按下 F12,看一眼p标签的盒子模型。
可以看到,定义 position属性后,在外边距外面会多出一层 position。
我们写的right: 50px;
实际上就是在 position这一层的右边添加了50px。
这添加的50px自然会将我们的元素往左挤50px,也就造成了你以为的反方向偏移。
那我们想让该元素向右偏移 50px应该写right: -50px;
才对
绝对定位
当我们把一个元素设置成绝对定位后,那么该元素将会脱离文档流,其他元素就会认为这个元素不存在于文档流中而填充它原来的位置。绝对定位元素根据它的参照物移动自己的位置,而参照物则需要根据它父元素的定位设置来确定。如果没有一个父元素设置定位,那么参照物是body层
。
父元素没有定位的情况
我们将上文中的 relative
修改为 absolute
直接观察浏览器中的效果
可以看到,当我们的父元素(div)没有设置定位时。它的参照物为上一层的 body
我们为 body设置边框或者按下 F12能够很直观的看出来。
父元素有定位的情况
我们使用 transform:translate(500px)
使 div标签向x轴偏移 500px
祖先元素只要设置了值不为 position:static之外的值,都视为有定位,并且最近的祖先元素会被设置为绝对定位元素的参照物。
固定定位
固定定位与绝对定位相似,但元素的包含块为 viewport 视口。
该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。
你可以把它理解为右下角弹出的小广告(不是
当我们把一个元素设置成固定定位后,那么该元素也将会脱离文档流
position: fixed;
right: 0px;
bottom: 0px;
z-index
z-index属性用于设定元素的层级,虽然我们的网页理论上只能显示二维效果,但并不意味着不存在层级这一概念。
上图为下列代码中定义的四个 div元素,为了凸显其层次故意添加了阴影。
<head>
<style>
div{
border: 1px solid black;
position: absolute;
top: 100px;
left: 100px;
box-shadow: 3px 3px 2px #666666;
text-align: right;
}
.div1{
width: 160px;
height: 160px;
background: #ffe0dc;
}
.......
.div4{
width: 100px;
height: 100px;
background: #f5f3f3;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</body>
可以发现,其层级顺序是按照 div元素的定义顺序决定的。后定义的元素层级会在先定义的元素之上
但该顺序是可以被改变的,我们上面也说过了 z-index属性用于设定元素的层级。
z-index 属性可以设置元素的堆叠顺序,也就是在元素Z轴上的层级。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。但是注意的是该属性只有在设置了positon定位之后才会生效。
尝试将第二个 div标签置于所有 div标签之上
同级下,z-index的值越大,堆叠顺序越靠前.
z-index值相同时,后定义的元素会在先定义的元素的层级之上。
z-index的值是可以设置0和负数的。
为了确认div3和 div4确实在 div2底下,我们可以使用 opacity
属性为 div2标签设置透明度
放松一下眼睛
夹带私货(不是