定位
定位position
- static 默认HTML模式，没有定位
- relative 相对定位
- fixed 固定定位
- absolute 绝对定位
定位方向
- top 上
- right 右
- bottom 下
- left 左
相对定位
参照物： 他自己的初识位置
position: relative
实验代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.wrap {
width: 200px;
height: 200px;
border: 2px solid red;
margin-bottom: 20px;
position: relative;
left: 100px;
}
.wrap2 {
width: 200px ;
height: 200px;
border: 2px solid blue;
}
</style>
</head>
<body>
<div class="wrap">
BOX 1
</div>
<div class="wrap2">
BOX 2
</div>
</body>
</html>
实验效果
绝对定位
参照物： 最近的，且带有定位标签的。如果都没有，按照浏览器定位。
position: absolute;
实验代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wrap {
width: 100px;
height: 100px;
border: 2px solid #0000FF;
margin-bottom: 20px;
position: absolute;
/*left: 10px;
top: 10px;*/
bottom: 50px;
right: 20px;
left: 50px;
top: 40px;
}
#wrap2 {
width: 200px;
height: 200px;
border: 2px solid red;
margin-left: 200px;
margin-top: 100px;
position: relative;
}
</style>
</head>
<body>
<div id="wrap2">
<div id="wrap">
BOX 1
</div>
</div>
</body>
</html>
实验效果
固定定位
参照物： 浏览器 类似于绝对定位找不到符合要求的标签一样。
position: fixed;
实验代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wrap {
width: 200px;
height: 200px;
border: 2px solid red;
margin-bottom: 20px;
position: absolute;
left: 200px;
}
#wrap2 {
width: 100px;
height: 100px;
border: 2px solid #0000FF;
position: fixed;
left: 100px;
top: 200px;
}
</style>
</head>
<body>
<div id="wrap">
Box
</div>
<div id="wrap2">
Box
</div>
</body>
</html>
实验效果
定位练习
淘宝商品轮播图
首先准备一张淘宝的图片
定义好标志和标点
<div id="wrap">
<div id="img">
<img src="images/huawei.jpg" >
</div>
<div id="span">
<span id="left"><</span>
<span id="right">></span>
</div>
<ul>
<li ></li>
<li></li>
<li id="active"></li>
<li></li>
<li></li>
</ul>
</div>
定义全局样式
#wrap {
width: 520px ;
height: 280px;
border: 1px solid red;
margin-top: 20px;
margin-left: 30px;
position: relative;
}
定义侧边按钮样式
/*侧边*/
#span {
width: 100%;
height: 10px;
position: absolute;
left: 0px;
top: 120px;
}
#left {
float: left;
}
#right {
float: right;
}
span {
width: 20px;
height: 30px;
color: red;
display: block;
text-align: center;
line-height: 30px;
background-color: #00FFFF;
}
定义菜单点
/*翻页点*/
ul {
padding: 5px 10px 5px 5px ;
position: absolute;
left: 200px;
bottom: 20px;
border-radius: 15%;
background-color: rgba(20,100,200,0.5);
}
li {
width: 10px;
height: 10px;
list-style: none;
float: left;
border-radius: 50%;
background-color: white;
margin-left: 5px;
}
#active {
background-color: red;
}
实验效果
