6、定位
6.1、相对定位
- 相对定位：position：relative
- 相对于原来的位置，进行指定的偏移，相对定位任然在标准文档流中，原来的位置会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 相对定位：相对原来的位置进行偏移-->
<style>
body{
padding: 20px;
}
div{
margin:15px;
padding: 5px;
font-size: 15px;
line-height: 25px;
}
#father{
border: 2px solid #CE4A50;
padding: 0;
}
#first{
border: 2px solid #3d6694;
background-color: #CE4A50;
position: relative;/*相对定位*/
top: 20px;/*距离上偏移20px*/
}
#second{
border: 2px solid #CE4A50;
background-color: #3d6694;
}
#three{
border: 2px solid #3d6694;
background-color: #CE4A50;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="three">第三个盒子</div>
</div>
</body>
</html>
top:距离上偏移
left:距离左偏移
bottom:距离下偏移
right:距离右偏移
<!-- 练习-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box</title>
<style>
#box{
width: 300px;
height: 300px;
padding: 10px;
border: 2px solid #CE4A50;
}
a{
width: 100px;
height: 100px;
background: #CE4A50;
text-decoration: none;
line-height: 100px;
display: block;
text-align: center;
color: white;
}
a:hover{
background: #3d6694;
}
.a2,.a4{
position: relative;
left: 200px;
top: -100px;
}
.a5{
position: relative;
left: 100px;
top: -300px;
}
</style>
</head>
<body>
<div id="box">
<a class="a1"href="#">A</a>
<a class="a2"href="#">B</a>
<a class="a3"href="#">C</a>
<a class="a4"href="#">D</a>
<a class="a5"href="#">E</a>
</div>
</body>
</html>
6.2、绝对定位
- 定位：基于XXX定位，上下左右~
- 没有父级元素定位的前提下，相对于浏览器定位
- 假设父级元素存在定位，通常会相对于父级元素进行偏移
- 在父级元素范围内移动
- 即相对于父级或浏览器的位置，进行指定的偏移，绝对定位不在标准文档流中，原来的位置不会被保留
positive:absolute
6.3、固定定位：fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
height: 100px;
width: 100px;
background: #CE4A50;
position: relative;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
height: 50px;
width: 50px;
background: #3d6694;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>A</div>
<div>B</div>
</body>
</html>
6.4、z-index：图层
- z-index：默认是0，最高无限~999
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../zindex.css">
</head>
<body>
<div id="content">
<ul>
<li ><img src="../picture/斯嘉丽.jpg" height="313" width="500" alt=""></li>
<li class="tipText">无边落木萧萧下</li>
<li class="tipBg"></li>
<li>时间：2021-01-25</li>
<li>地点：舞台</li>
</ul>
</div>
</body>
</html>
#content{
height: 380px;
margin: 0;
padding: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 2px solid #CE4A50;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
height: 380px;
width: 200px;
top: 270px;
font-size: 25px;
color: #CE4A50;
left:10px
}
.tipText{
color: white;
z-index: 0;/*图层*/
}
.tipBg{
background: #3d6694;
opacity: 0.2;/*背景透明度*/
}
7、动画
- 模版之家
- 卡巴斯基网络威胁
- Canvas