定位
定位简介
流定位
浮动定位
相对定位
绝对定位
定位属性
堆叠顺序
固定定位
右浮动：
<!doctype html>
<html>
<head>
<title>右浮动</title>
<meta charset="utf-8"/>
<style type="text/css">
div {
border: 1px solid #000;
margin: 3px;
}
#outter {
400px;
}
#d1 {
200px;
height: 200px;
background-color: red;
}
#d2 {
150px;
height: 150px;
background-color: blue;
}
#d3 {
100px;
height: 100px;
background-color: green;
}
p {
border: 1px solid #000;
}
/*向右浮动*/
#d1, #d2, #d3 {
float: right;
}
/*消除浮动对p带来的影响*/
/*这种方式只能消除对p的影响，
无法消除对外层div的影响。*/
p {
/*clear: right;*/
}
</style>
</head>
<body>
<!doctype html>
<html>
<head>
<title>新闻图片</title>
<meta charset="utf-8"/>
<style type="text/css">
div {
border: 3px solid #ccc;
256px;
position: relative;
}
p {
/*border: 1px solid #f00;*/
position: absolute;
top: 0;
left: 0;
margin: 0;
100%;
text-align: center;
line-height: 1.6em;
color: #fff;
background-color: #333;
}
</style>
</head>
<body>
<div>
<img src="../images/image1.png"/>
<p>十一黄金周游客挤爆张家界</p>
</div>
</body>
</html>
照片堆：
<!doctype html>
<html>
<head>
<title>照片堆</title>
<meta charset="utf-8"/>
<style type="text/css">
div {
20px;
height: 30px;
border: 3px solid red;
margin: 200px auto;
position: relative;
}
#img1 {
position: absolute;
}
#img2 {
position: absolute;
left: 50px;
top: -150px;
}
#img3 {
position: absolute;
left: -250px;
top: -50px;
}
img:hover {
/*让悬停的图片处于最顶层*/
z-index: 999;
}
</style>
</head>
<body>
<div>
<img src="../images/1.jpg" id="img1"/>
<img src="../images/2.jpg" id="img2"/>
<img src="../images/3.jpg" id="img3"/>
</div>
</body>
</html>
固定定位：
<!doctype html>
<html>
<head>
<title>固定定位</title>
<meta charset="utf-8"/>
<style type="text/css">
#top {
position: fixed;
bottom: 10px;
right: 5px;
}
</style>
</head>
<body>
<h1>固定定位</h1>
<div id="top">
<a href="#">TOP</a>
</div>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</body>
</html>
左浮动：
<!doctype html>
<html>
<head>
<title>左浮动</title>
<meta charset="utf-8"/>
<style type="text/css">
div {
border: 1px solid #000;
margin: 3px;
}
#outter {
400px;
}
#d1 {
100px;
height: 100px;
background-color: red;
}
#d2 {
150px;
height: 150px;
background-color: blue;
}
#d3 {
200px;
height: 200px;
background-color: green;
}
p {
border: 1px solid #000;
}
/*左浮动*/
#d1, #d2, #d3 {
float: left;
}
</style>
</head>
<body>
<div id="outter">
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<div style="border:0;clear:left;"></div>
</div>
<p>苍苍、奇奇、晶晶</p>
</body>
</html>
相对定位：
<!doctype html>
<html>
<head>
<title>相对定位</title>
<meta charset="utf-8"/>
<style type="text/css">
div {
border: 1px solid red;
100px;
height: 100px;
margin: 10px;
}
#d2 {
position: relative;
left: -30px;
top: -30px;
}
</style>
</head>
<body>
<div id="d1">d1</div>
<div id="d2">d2</div>
</body>
</html>
照片墙：
<!doctype html>
<html>
<head>
<title>照片墙</title>
<meta charset="utf-8"/>
<style type="text/css">
body {
background-color: #300;
}
ul {
780px;
margin: 10px auto;
/*border: 1px solid #fff;*/
/*去掉li前的符号*/
list-style-type: none;
}
li {
background-color: #fff;
border: 1px solid #ddd;
218px;
padding: 10px;
margin: 10px;
float: left;
}
li p {
text-align: center;
}
li:hover {
/*相对定位*/
position: relative;
/*设置偏移量*/
left: -2px;
top: -2px;
}
</style>
</head>
<body>
<!-- 照片墙上的照片列表 -->
<ul>
<li>
<img src="../images/01.jpg"/>
<p>啊，亲爱的苍！</p>
</li>
<li>
<img src="../images/02.jpg"/>
<p>此时，你身在何方？</p>
</li>
<li>
<img src="../images/03.jpg"/>
<p>难道真的漂过了洋？</p>
</li>
<li>
<img src="../images/04.jpg"/>
<p>Japan的痴汉有很多很多，</p>
</li>
<li>
<img src="../images/05.jpg"/>
<p>你千万要穿好衣裳！</p>
</li>
<li>
<img src="../images/06.jpg"/>
<p>别走了光！</p>
</li>
</ul>
</body>
</html>
绝对定位：
<!doctype html>
<html>
<head>
<title>绝对定位</title>
<meta charset="utf-8"/>
<style type="text/css">
#outter {
300px;
height: 300px;
border: 1px solid red;
}
#d1 {
100px;
height: 100px;
background-color: blue;
}
/*将父元素相对定位，这样就可以以它为基准了*/
#outter {
position: relative;
}
/*绝对定位，是相对父元素而言的*/
#d1 {
position: absolute;
/*以父元素的右、下边为基准*/
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div id="outter">
<div id="d1"></div>
</div>
</body>
</html>
新闻图片：