CSS——定位，z-index和透明度
CSS 定位 (Position) 属性允许你对元素进行定位。
| static | 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。 |
|---|---|
| relative | 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20” 会将元素移至元素正常位置左边 20 个像素的位置。 |
| absolute | 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、“top”、“right” 以及 “bottom” 属性来规定。 |
| fixed | 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、“top”、“right” 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。 |
绝对定位（absolute）
1.父级元素没有定位的前提下，会相对于浏览器页面定位
2.假设父级元素存在定位，会根据父级元素进行指定偏移,不能超脱父级元素
#father{
border:1px solid red;
padding:10;
position:relative; /*先父级元素加一个定位*/
}
#second{
border:1px solid blue;
position:absolute;
top:-30px; /*相对于父级元素指定偏移*/
right:30px;
}
相对定位（relative）
相对定位：相对于自己原来的位置进行指定的偏移（相对定位任然在标准文档流中，并且偏移之前的位置会被保留）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--相对定位：相对于自己原来的位置进行偏移 -->
<style>
body{
padding:20px;
}
div{
margin:10px;
padding:5px;
font-size:14px;
line-height:25px;
}
#father{
border:1px solid red;
padding:10;
}
#first{
border:1px solid green;
position:relative; /*相对定位*/
top:-20px; /*向上移20px*/
left:20px; /*向右移20px*/
}
#second{
border:1px solid blue;
}
#third{
border:1px solid yellow;
position:relative; /*相对定位*/
bottom:-10px; /*向下移10px*/
right:10px; /*向左移10px*/
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
效果图
固定定位（fixed）
不论窗口滚动与否，元素都会留在那个位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height:1000px;
}
div:nth-of-type(1){
width:200px;
height:200px;
background:red;
position:absolute;
right:0;
bottom:0; /*位于浏览器的右下角*/
}
div:nth-of-type(2){
width:100px;
height:100px;
background:yellow;
position:fixed;
right:0;
bottom:0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
效果图
Z-INDEX
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
Z-index 仅能在定位元素上奏效（例如 position:absolute;）
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" />
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>
</html>
效果图
透明度（opacity）
设置 div 元素的不透明级别
规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
div{
opacity:0.5;
}
<!DOCTYPE html>
<html>
<head>
<script>
function ChangeOpacity(x)
{
// 返回被选选项的文本
var opacity=x.options[x.selectedIndex].text;
var el=document.getElementById("p1");
if (el.style.opacity!==undefined)
{
el.style.opacity=opacity;}
else
{
alert("Your browser doesn't support this example!");}
}
</script>
</head>
<body>
<p id="p1">请从下面的例子中选择一个值，以改变此元素的不透明度。</p>
<select onchange="ChangeOpacity(this);" size="5">
<option />0
<option />0.2
<option />0.5
<option />0.8
<option selected="selected" />1
</select>
</body>
</html>
效果图
