Position:定位
- position在英文里是定位的意思,这里主要是用来实现对元素的定位。
- CSS的定位分成3种:固定定位(fixed),相对定位(relative)和绝对定位(absolute)。
- 在给元素定位时,一定要注意配合坐标来使用:left(定位元素离左边多远),right(定位元素离右边多远),bottom,top。它们的值都是像素值。
- 固定定位
固定定位是相对于浏览器窗口来定位的,对于固定定位元素来说,只要浏览器窗口不动,固定定位元素也不会移动,无论页面的滚动轮如何移动,固定定位元素的位置也不会发生改变。另外,固定定位元素是脱离了标准文档流的,当固定定位元素和标准文档流中的元素位置发生冲突时,固定定位元素会覆盖标准文档流中的元素。
例子1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位小练习</title>
<style type="text/css">
#back{
display: block;
width: 80px;
height: 50px;
background-color: #808080;
text-align: center;
line-height: 25px;
position: fixed;
right: 30px;
bottom: 100px;
}
a{
display: block;
width: 80px;
height: 50px;
}
a:link,a:visited{
color: white;
text-decoration: none;
}
a:hover{
color: #000000;
background-color: white;
}
</style>
</head>
<body>
<img src="../img/hehua.jpg" >
<img src="../img/hehua.jpg" >
<img src="../img/hehua.jpg" >
<img src="../img/hehua.jpg" >
<img src="../img/hehua.jpg" >
<img src="../img/hehua.jpg" >
<span id="back">
<a href="#">返回<br>顶部</a>
</span>
</body>
</html>
效果:
例子2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位练习2</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 20px;
font-family: "微软雅黑";
background-image: url(../img/beijing.jpg);
}
.th{
width: 960px;
height: 40px;
margin-left: auto;
margin-right: auto;
/* position: fixed; */
}
ul{
list-style: none;
}
ul li{
float: left;
width: 160px;
height: 40px;
background-image: url(../img/diwenbiaoti.jpg);
text-align: center;
line-height: 40px;
}
a{
text-decoration: none;
color: #000000;
display: block;
width: 160px;
height: 40px;
}
a:hover{
color: #4169E1;
font-size: 24px;
font-weight: bold;
background-color: white;
}
.men{
position: fixed;
left: 240px;
top: 0px;
}
</style>
</head>
<body>
<div class="men">
<div class="th">
<ul>
<li><a href="">标题</a></li>
<li><a href="">标题</a></li>
<li><a href="">标题</a></li>
<li><a href="">标题</a></li>
<li><a href="">标题</a></li>
<li><a href="">标题</a></li>
</ul>
</div>
</div>
<img src="../img/hehua.jpg" >
<img src="../img/hehua.jpg" >
<img src="../img/hehua.jpg" >
<img src="../img/hehua.jpg" >
</body>
</html>
效果:
- 相对定位
相对定位元素是相较于相对定位元素自己最初的位置来定位的, 另外,相对定位元素是没有脱离标准文档流的,所以如果相对定位元素不设置坐标的话,相对定位元素的位置不会发生变化,但是如果给相对定位元素设置了坐标,那么,原来相对定位元素的位置就会留下一个坑,而且,如果和其他元素有位置冲突的话,相对定位元素也会覆盖与之冲突的元素。
注意:相对定位元素很少使用,它一般是配合绝对定位元素来使用的。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位小练习</title>
<style type="text/css">
.rel{
width: 300px;
height: 300px;
border: 1px solid #4169E1;
}
.rel1{
width: 100px;
height: 100px;
background-color: #FF0000;
}
.rel2{
width: 100px;
height: 100px;
background-color: #0f0;
position: relative;
left: 50px;
top: 50px;
}
.rel3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="rel">
<div class="rel1"></div>
<div class="rel2"></div>
<div class="rel3"></div>
</div>
</body>
</html>
效果:
- 绝对定位
绝对定位:绝对定位是相对于祖先定位元素来进行定位的,这里的祖先定位元素可以是绝对定位元素,相对定位元素,也可以是绝对定位元素,但一般都是相对定位元素。如果祖先没有一个是定位的元素,那么就会相对于窗口进行定位。另外,如果其祖先有多个是定位元素,那么会对于最近的定位元素定位。绝对定位元素是脱离了标准文档流的,所以也会对标准文档流中的元素覆盖。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位练习</title>
<style type="text/css">
.out{
margin: 100px;
border: 1px solid black;
position: relative;
}
#up{
position: absolute;
left:7px;
top:-6px;
}
</style>
</head>
<body>
<div class="out">
<img id="dow" src="../img/miana.png" >
<img id="up" src="../img/mianb.png" >
</div>
<img src="../img/danghang.jpg" >
<img src="../img/danghang.jpg" >
<img src="../img/danghang.jpg" >
<img src="../img/danghang.jpg" >
<img src="../img/danghang.jpg" >
<img src="../img/danghang.jpg" >
<img src="../img/danghang.jpg" >
<img src="../img/danghang.jpg" >
<img src="../img/danghang.jpg" >
<img src="../img/danghang.jpg" >
<img src="../img/danghang.jpg" >
</body>
</html>
效果: