position 属性
position 属性与float属性一样，在css排版中都非常重要。position顾名思义是和位置相关的属性，用于规定元素的定位类型。
position 属性有4个属性值，这4个属性值代表着不同定位类型：
-
static：默认值，没有定位，元素保持在原本位置（忽略 top, bottom, left, right 或者 z-index 声明）； -
relative：相对定位，相对于其原本的标准位置进行偏移，但是相对定位的元素仍在标准流中，它后面的元素仍以标准流的方式对待它。如："left:20" 表示向元素的左边位置添加 20 像素； -
absolute：绝对定位，相对于 static 定位以外的第一个父元素进行定位，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。绝对定位的元素从标准流中脱离，对其后的其他元素的定位没有影响； -
fixed：固定定位，和绝对定位类似，相对于浏览器窗口进行定位，也就是说当拖动浏览器窗口的滚动条时，元素的位置依旧不变。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定； -
inherit：规定应该从父元素继承 position 属性的值；
相对定位实例
我们通过实例来看一下元素不定位和相对定位、绝对定位有什么不同，先看一下不定位
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.box{
width:300px;
height:200px;
border:1px solid #000;
}
.box div{
height:50px;
margin:10px;
}
.A{
background:#DD8CD0;
}
.B{
background:#73EBBC;
}
.C{
background:#80A8E5;
}
</style>
</head>
<body>
<div class="box">
<div class="A">
</div>
<div class="B">
</div>
<div class="C">
</div>
</div>
</body>
</html>
- 设置盒子A为相对定位的代码
.A{
background:#DD8CD0;
position:relative;
top:-30px;
left:30px;
}
这里用到了css里面的top和left两个属性，除此之外还有bottom和right，这4个属性只有当postion属性设置为absolute、relative或fixed时才有效果；
通过给盒子A设置相对定位，我们可以知道相对定位的盒子会相对它原来的位置，通
过指定的偏移量到达新的位置，且对父级盒子和相邻盒子都没有影响；
绝对定位的实例
我们知道相对定位是相对于元素本身的的位置作为偏移基准，那么绝对定位呢，使用了绝对定位的元素会以最靠近它的‘已经定位的祖先元素’为基准进行偏移的。如果没有已经定位的祖先元素，就以浏览器窗口为基准进行定位；
我们来给最大的div加一个相对定位，为盒子A加一个绝对定位
.box{
width:300px;
height:200px;
border:1px solid #000;
position:relative;
}
.A{
background:#DD8CD0;
width:280px;
position:absolute;
top:-20px;
left:50px;
}
我们看这个图，发现给盒子A绝对定位后，盒子B和盒子C会改变位置，是因为绝对定位的元素会从标准流中脱离；
还有其他的固定定位fixed，大家可以自己尝试一下哟~
z-index属性
z-index 属性指定一个元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面（值更大的元素在上面）
z-index 属性的值为整数，可以是正整数或者是负整数，默认值为0。注意只有元素被设置了position属性值时，各元素才可以通过设置z-index属性值来控制重叠高低关系，当两个层的z-index值一样时，将保持原有的高低覆盖关系；
我们来试一下，给最大的div设置相对定位，然后给盒子A和B设置绝对定位
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.box{
width:300px;
height:200px;
border:1px solid #000;
position:relative;
}
.box div{
height:50px;
margin:10px;
}
.A{
background:#DD8CD0;
width:280px;
position:absolute;
top:0;
}
.B{
background:#73EBBC;
width:280px;
position:absolute;
top:0;
}
</style>
</head>
<body>
<div class="box">
<div class="A">
A
</div>
<div class="B">
B
</div>
</div>
</body>
</html>
我们看到现在是显示盒子B在上面，那我们现在给盒子A设置z-index值为100，给盒子B设置值为1
.A{
background:#DD8CD0;
width:280px;
position:absolute;
top:0;
z-index:100;
}
.B{
background:#73EBBC;
width:280px;
position:absolute;
top:0;
z-index:1;
}
现在显示的是盒子A，因为现在盒子A的z-index值比盒子B要大，大家自己动手试一下；
opacity
我们还可以使用opacity:x属性给元素设置透明度，x的取值为0~1之间，从0.0（完全透明）到1.0（完全不透明），值越小越透明。比如我们给A设置透明度为0.3试一下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.box{
width:300px;
height:200px;
border:1px solid #000;
}
.A{
height:50px;
margin:10px;
background:#DD8CD0;
opacity:0.3;
}
</style>
</head>
<body>
<div class="box">
<div class="A">
</div>
</div>
</body>
</html>
网友评论