6、定位
6.1、相对定位
相对于原来的位置，进行偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留
position:relative
top:-10px
left:-10px
buttom:-10px
right-10px
练习题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习题</title>
<link rel="stylesheet" href="CSS/练习题.css">
</head>
<body>
<div id="box">
<a href="#" class="a1">链接1</a>
<a href="#" class="a2">链接2</a>
<a href="#" class="a3">链接3</a>
<a href="#" class="a4">链接4</a>
<a href="#" class="a5">链接5</a>
</div>
</body>
</html>
#box{
width:300px;
height:300px;
border:10px solid #090505;
padding:10px;
}
a
{
width:100px;
height:100px;
text-decoration:none;
background:pink;
line-height:100px;
text-align:center;
color:white;
display:block;
}
a:hover{
background: #3748ff;
}
.a2,.a4{
position:relative;
left:200px;
top:-100px;
}
.a5
{
position:relative;
left:100px;
top:-300px;
}
6.2、绝对定位
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们会相对父级元素进行偏移
3、在父级元素范围内移动
相对于父级或者浏览器的位置，进行制定的偏移，绝对定位后，它不在标准文档流中，原来位置不会被保留
6.3、固定定位fix
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<link rel="stylesheet" href="CSS/固定定位.css">
</head>
<body>
<div></div>
<div></div>
</body>
</html>
body{
height:1000px;
}
div:nth-of-type(1){
width:100px;
height:100px;
background: #ff4f3d;
position:absolute;
right:0;
bottom:0;
}
div:nth-of-type(2){
width:100px;
height:100px;
background: #768e80;
position:fixed;
right:0;
bottom:0;
}
6.4、z-index
z-index:默认是0 ，最高无限
opacity:0.5;网页背景透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zindex</title>
<link rel="stylesheet" href="CSS/zindex.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/img1.png" alt=""></li>
<li class="tipTEXT">修图|化妆|做前端</li>
<li class="tipBg"></li>
<li>时间：2023.9.3</li>
<li>地点：拍摄地点 公司</li>
</ul>
</div>
</body>
</html>
#content{
width:200px;
padding:0px;
margin:0px;
overflow:hidden;
font-size:12px;
line-height:25px;
border:1px #000000 solid;
}
ul,li{
margin:0px;
padding:0px;
list-style:none;
}
/*父级元素相对定位*/
#content ul{
position:relative;
}
.tipTEXT,.tipBg{
position:absolute;
width:200px;
height:25px;
top:233px;
}
.tipTEXT{
z-index:999;
color:black;
}
.tipBg{
background: #ffffff;
opacity:0.5;
/*filter:alpha(opacity=50)*/
}