<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#right,#left,#center{
float: left;
}
#left{
width: 200px;
height: 200px;
background-color: yellow;
}
#center{
width: 200px;
height: 200px;
background-color: #cccccc;
/*position: relative;*/
position: absolute;
top: 20px;
left: 20px;
/*z-index 可以改变浮动的布局
z-index可以在相对和绝对定位中使用*/
z-index: -1;
}
#right{
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
<title>定位</title>
</head>
<body>
<!--css定位属性position
static
relative 相对定位
absolute 绝对定位
fixed 固定定位-->
<!--css其他定位属性
top
right
bottom
left
Z-index-->
<!--相对定位是相对于元素的原始位置,移动后仍然占据原来的位置-->
<!--绝对定位是相对于最近的定位父元素进行定位。定位后，原来的位置会被其他元素补充（定位后他的位置会空出来）
采用绝对定位的元素，会寻找离他最近的采用了定位的父元素，并以其为坐标进行定位
若所有父元素都没使用定位，则以body为坐标进行定位-->
<!--固定定位类似于绝对定位，根据窗口原点进行偏移定位，不会根据滚动条的滚动进行偏移-->
<div style="position: relative;top: 50px;left: 100px">
<div>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</div>
</body>
</html>
书签式界面的方法线、点、方框全是图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.biao{
position: relative;
height: 700px;
width: 1011px;
background-color:darkgrey;
}
.shu{
position: absolute;
width: 1px;
height: 658px;
background-image: url("../../img/f1_line.png");
left: 505px;
top: 21px;
}
.dian1{
background-image: url("../../img/f1_dot.png");
position: absolute;
width: 18px;
height: 18px;
top: 20px;
left: -8.5px;
}
.tu1{
background-image: url("../../img/f1_2016.png");
position: absolute;
width: 480px;
height: 167px;
left: -481px;
top: -16px;
}
.dian2 {
background-image: url("../../img/f1_dot.png");
position: absolute;
width: 18px;
height: 18px;
top: 60px;
left: -8.5px;
}
.tu2{
background-image: url("../../img/f1_2015.png");
position: absolute;
width: 480px;
height: 167px;
left:18px;
top: -15px;
}
.dian3{
background-image: url("../../img/f1_dot.png");
position: absolute;
width: 18px;
height: 18px;
top: 220px;
left: -8.5px;
}
.tu3{
background-image: url("../../img/f1_2014.png");
position: absolute;
width: 480px;
height: 167px;
left: -481px;
top: -16px;
}
.dian4{
background-image: url("../../img/f1_dot.png");
position: absolute;
width: 18px;
height: 18px;
top: 260px;
left: -8.5px;
}
.tu4{
background-image: url("../../img/f1_2013.png");
position: absolute;
width: 480px;
height: 167px;
left:18px;
top: -15px;
}
.dian5{
background-image: url("../../img/f1_dot.png");
position: absolute;
width: 18px;
height: 18px;
top: 420px;
left: -8.5px;
}
.tu5{
background-image: url("../../img/f1_2012.png");
position: absolute;
width: 480px;
height: 167px;
left: -481px;
top: -16px;
}
.dian6{
background-image: url("../../img/f1_dot.png");
position: absolute;
width: 18px;
height: 18px;
top: 460px;
left: -8.5px;
}
.tu6{
background-image: url("../../img/f1_2011.png");
position: absolute;
width: 480px;
height: 167px;
left:18px;
top: -15px;
}
</style>
<title>书签</title>
</head>
<body>
<div class="biao">
<div class="shu">
<div class="dian1">
<div class="tu1"></div>
</div>
<div class="dian2">
<div class="tu2"></div>
</div>
<div class="dian3">
<div class="tu3"></div>
</div>
<div class="dian4">
<div class="tu4"></div>
</div>
<div class="dian5">
<div class="tu5"></div>
</div>
<div class="dian6">
<div class="tu6"></div>
</div>
</div>
</div>
</body>
</html>固定定位的运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#back{
width: 150px;
background-color: #4d2e83;
height: 50px;
text-align: center;
line-height: 50px;
position: fixed;
bottom: 50px;
right: 50px;
/*z-index 一般设置为一个极大的数值 数字越大越在前*/
z-index: 1000;
}
</style>
<title>固定定位</title>
</head>
<body>
<div style="height: 2000px">
<div id="back">
返回i页面顶部
</div>
</div>
</body>
</html>