Z-index就是z轴的方向。
<!DOCTYPE html>
<!--z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。-->
<!--注释:元素可拥有负的 z-index 属性值。-->
<!--注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!-->
<!--position为relative或absolute或fixed才起作用,static不起作用-->
<!--http://www.w3school.com.cn/cssref/pr_pos_z-index.asp-->
<!--http://www.fx114.net/qa-6-305787.aspx-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.mydiv1{
position: fixed;
width: 100px;
height: 100px;
background-color: #00A000;
top: 0px;
lef: 0px;
z-index: 1;
}
.mydiv2{
position: fixed;
width: 100px;
height: 100px;
background-color: #219161;
top: 50px;
left: 50px;
z-index: 2;
}
</style>
</head>
<body>
<div class="mydiv1">
</div>
<div class="mydiv2">
</div>
</body>
</html>
<!DOCTYPE html>
<!--背景尺寸背景居中-->
<!--参考http://www.w3school.com.cn/cssref/pr_background-size.asp-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
html,body{
width: 100%;
height: 100%;
}
*{
margin: 0;
padding: 0;
}
/*最外层的div要设置宽高100% 100%,则要给html,body宽高都设置成100%*/
.mydiv1{
width: 100%;
height: 100%;
/*设置背景图片,x y 轴都不重复*/
background: url("images/img01.jpg")no-repeat;
/*设置背景尺寸*/
background-size: 100% 100%;
/*背景居中*/
background-position: center;
}
</style>
</head>
<body>
<div class="mydiv1">
</div>
</body>
</html>
<!DOCTYPE html>
<!--权重-->
<!--第一等:style,代表内联样式,如: style=””,权值为1000。-->
<!--第二等:ip,代表ID选择器,如:#content,权值为100。-->
<!--第三等:class,代表类,伪类和属性选择器,如.content,权值为10。-->
<!--第四等:元素,代表类型选择器和伪元素选择器,如div p,权值为1。-->
<!--权值越大,优先级越高,优先执行style,在执行ip,在执行class,在执行元素-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#mydivip{
width: 100px;
height: 100px;
background-color: #AA22FF;
}
.mydivclass{
width: 100px;
height: 100px;
background-color: #00A000;
}
div{
width: 100px;
height: 100px;
background-color: #005599;
}
</style>
</head>
<body>
<div id="mydivip" class="mydivclass" style=" width: 100px;
height: 100px;
background-color: red;">
<p id="red">这个段落是红色。</p>
<p>人的生命是有限的,可是为人民服务是无限</p>
</div>
</body>
</html>