最近看书时,看到了CSS的位置样式说明,正好可以补充在感知监控项目中。
position属性规定元素的定位类型,属性值和描述见下述表格(摘自w3school):
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位.元素的位置通过“left”,"top","right","bottom"属性进行规定 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过“left”,"top","right","bottom"属性进行规定 |
relative | 生成相对定位的元素,相对于正常的位置进行定位。因此,“left:20”会向元素的left位置添加20像素 |
static | 默认值。没有定位,元素正常的出现在流中(忽略top,bottom,left,right或者z-index声明) |
inherit | 规定应该从父元素继承position属性的值 |
其中比较容易让人混淆的是absolute和relative
absolute从字面上也可以理解是绝对定位的意思,它脱离了文档结构,参照static定位以外的第一个父元素,使用left、top、right、bottom进行定位,并且不会占据原来的位置。
实验一:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>absolute绝对定位演示code</title>
<style type="text/css">
.parent{
width: 100px;
height: 100px;
background: red;
left: 50px;;
}
.child1{
position: absolute;
width: 100px;
height: 100px;
background: blue;
top:50px;
left: 50px;
}
</style>
</head>
<body>
<div class="parent">1
<div class="child1">2</div>
</div>
</body>
</html>
效果图:
首先可以看出div1的position属性是默认值static,所以left:50px;对其没有任何效果,而div2的position属性是absolute,相对于页面的左上角进行定位。
实验二:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>absolute绝对定位演示code</title>
<style type="text/css">
.parent{
width: 100px;
height: 100px;
background: red;
/*left: 50px;;*/
position: absolute;
left: 100px;;
}
.child1{
position: absolute;
width: 100px;
height: 100px;
background: blue;
top:50px;
left: 50px;
}
</style>
</head>
<body>
<div class="parent">1
<div class="child1">2</div>
</div>
</body>
</html>
效果图:可以看出absolute定位相对于父元素进行了偏移,此时div1的position设置为absolute,div2以div1的位置为基准进行偏移。(div1 position设置为relative和fixed也是同样的效果)。查看了网上前辈们的介绍还了解到absolute元素会悬浮于页面上方,遮挡住下方的页面内容。设置absolute会使得元素已有的float失效。
relative是相对定位,相对的是谁呢?相对的是自身的位置,他不会影响其他元素的位置,但是仍然占据着原来的位置,只是在视觉上发生了偏移。
实验一:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>relative绝对定位演示code</title>
<style type="text/css">
div{
margin: 0;
padding: 0;
list-style: none;
}
.parent{
width: 100px;
height: 100px;
background: red;
left:300px;
}
.child1{
/* position: relative;*/
width: 50px;
height: 50px;
background: blue;
top:50px;
left: 50px;
}
.super1{
width: 200px;
height: 200px;
background: yellow;
position: relative;
left: 50px;
}
</style>
</head>
<body>
<div class="super1">
<div class="parent">
</div>
</div>
<div class="child1">
</div>
</body>
</html>
效果如下图:super1 div元素设置relative,相对于原来的位置进行偏移,他会影响自身子元素的位置,但不会影响其他兄弟元素的位置 。
这时候,如果把兄弟元素设置为absolute,会有什么效果呢?
明显,absolute会影响后续兄弟元素的位置,并且原先他所占的位置也没有了,被后续兄弟元素占领,并有覆盖现象,证实了上述的说法。
absolute和relative组合出现的情况:
实验:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>relative绝对定位演示code</title>
<style type="text/css">
div{
margin: 0;
padding: 0;
list-style: none;
}
.parent{
width: 100px;
height: 100px;
background: red;
position:relative;
top:100px;
}
.child1{
position: relative;
width: 50px;
height: 50px;
background: blue;
top:50px;
left: 50px;
}
.super1{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
left: 50px;
}
</style>
</head>
<body>
<div class="super1">
<div class="parent">
</div>
</div>
<div class="child1">
</div>
</body>
</html>
效果如下图:
首先看super1 div position属性值是absolute,但是他没有父元素,所以根据页面左上角为基准向左偏移50px,他的子元素parent position属性值是relative 相对于自身原本位置进行偏移,原本位置与父元素顶齐,现在向下偏移100px。super1的兄弟元素child1 position属性值为relative 但由于super1元素原先位置已不再占有,所以child1元素原先的位置是以页面左上角为起点的,现在以这个为基准进行偏移。
至此,通过一些简单的实验加深一下对position位置的了解。多动手多思考,记忆更深刻。