<!DOCTYPE html>
<!--CSS中position属性-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 50px;
background-color: black;
color: #dddddd;
position: fixed;
top:0;
right: 0;
left: 0;
}
.pg-body{
background-color: #dddddd;
height: 200px;
margin-top: 100px;
}
</style> </head>
<body> <div class="pg-header">头部 position: fixed;分层固定中页面某个位置</div>
<div class="pg-body">内容 margin-top: 100px 离顶部100像素</div> <div style="width: 40px;
height:40px;
background-color:red;
color:green;
position: fixed;
bottom:100px;
right: 100px;
">
-返回顶部
</div>
<div style="position: relative;width: 500px;height: 500px;border: 5px solid red;margin:0 auto;"> 父级position: relative配合子级position: absolute使用才有效果 <div style="position: absolute;left: 100px;bottom: 200px;width: 150px;height: 20px;background-color:gold; ">
以父级的位置做为起始点来偏移位置left加bottom，-------块的大小;width加height，---------块的颜色background-color
</div>
</div> <br/>
<br/> <div style="position: relative;width: 500px;height: 500px;border: 5px solid red;margin:0 auto;">
<div style="position: absolute;left: 0px;bottom: 0px;width: 50px;height: 50px;background-color:green; "></div>
</div> </body>
</html>
CSS中position属性
<!DOCTYPE html>
<!--CSS中position多层背景-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style=" <!--display: none;-->
z-index:10;
position: fixed;
top:50%;
left: 50%;
margin-left:-250px;
margin-top:-250px;
background-color: white;
height:400px;
width: 500px;
">
<!--注释--> display: none;让标签消失 z-index层级的顺序
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div> <div style="<!--display: none;-->
z-index:9;
position: fixed;
background-color: white;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.5;
">
<!--注释--> display: none;让标签消失 opacity: 0.5控制透明度
</div>
<div style="height: 5000px;
background-color: green;
">
内容显示层
</div> </body>
</html>
CSS中position多层背景
<!DOCTYPE html>
<!--CSS中header应用-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 48px;
background-color: #2459a2;
line-height: 48px;
}
.pg-body{
margin-top: 50px;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
} /*hover当鼠标移动到当前标签时，以下CSS属性才生效*/
.pg-header .menu:hover{
background-color: #E80203;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">
<div class="w"> 其他内容 </div>
</div>
</body>
</html>
CSS中header应用
1.jpg
<!DOCTYPE html>
<!--CSS中overflow应用-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px;overflow: auto;">
overflow: auto超过设定就出滚动条
<img src="1.jpg">
</div>
<br/>
<div style="height: 200px;width: 300px;overflow: hidden;">
overflow: hidden超过设定就不显示，隐藏
<img src="1.jpg">
</div>
</body>
</html>
CSS中overflow应用
2.gif
3.png 
4.jpg 
<!DOCTYPE html>
<!--CSS在background的应用1-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-image: url(2.gif);
height:700px;">
堆叠图片 平铺效果
</div> <br/>
<div>--------------------分割-------------------</div>
<div>--------------------分割-------------------</div>
<div>--------------------分割-------------------</div>
<div>--------------------分割-------------------</div>
<div>--------------------分割-------------------</div>
<br/> <div style="background-image: url(2.gif);
background-repeat:repeat-x;
height:700px;">
堆叠图片 X横向平铺效果
</div> <br/>
<div>--------------------分割-------------------</div>
<div>--------------------分割-------------------</div>
<div>--------------------分割-------------------</div>
<div>--------------------分割-------------------</div>
<div>--------------------分割-------------------</div>
<br/> <div style="background-image: url(2.gif);
background-repeat:repeat-y;
height:700px;">
堆叠图片 Y竖向平铺效果
</div> </body>
</html>
CSS在background的应用1
<!DOCTYPE html>
<!--CSS在background的应用2-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 100px;border: 2px solid green;"> 根据位置移动来显示 </div>
<div style="background-image:url(3.png);
background-repeat:no-repeat;
height: 18px;
width: 18px;
border: 2px solid red;
background-position-x: 0px;
background-position-y: 0px;
">
</div>
<br/>
<div style="height: 100px;border: 2px solid green;"> 根据位置移动来显示 </div>
<div style="background-image:url(3.png);
background-repeat:no-repeat;
height: 18px;
width: 18px;
border: 2px solid red;
background-position-x: 0px;
background-position-y: -15px;
">
</div>
<br/>
<div style="height: 100px;border: 2px solid green;"> 简单的写法 </div>
<div style="background: url(3.png) 1px -35px no-repeat;
height: 18px;
width: 18px;
border: 2px solid red;
"> </div>
<br/>
<div style="height: 100px;border: 2px solid green;"> 全图显示 </div>
<div style="background-image: url(3.png);
height: 178px;
width: 18px;
border: 2px solid red;
"> </div> </div> </body>
</html>
CSS在background的应用2
<!DOCTYPE html>
<!--CSS在background实例-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div style="height: 50px;width: 400px;position: relative;">
<input type="text" style="height: 50px;width: 360px;padding-right: 40px">
<span style="position: absolute;
right: 5px;
top: 5px;
background-image: url(4.jpg);
height: 40px;
width: 40px;
display: inline-block;
">
</span>
</div> </body>
</html>
CSS在background实例