6.CSS定位
作者：互联网
6.定位
6.1相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--相对定位
相对于自己原来的位置进行偏移-->
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
}
#first{
border: 1px solid red;
position: relative;/*相对定位：上下左右*/
top: -20px;
left: 20px;
}
#second{
border: 1px solid red;
}
#third{
border: 1px solid red;
position: relative;
bottom:10px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
相对定位：position:relative
相对于原来的位置进行指定的偏移，如果相对定位的话，它仍然在标准文档流中，原来的位置会被保留
6.2 绝对定位
1.没有父级元素定位的前提下，相对于浏览器定位
2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3.在父级元素范围内移动
相对于父级或浏览器位置进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--相对定位
相对于自己原来的位置进行偏移-->
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
position: relative;
}
#first{
border: 1px solid red;
}
#second{
border: 1px solid red;
position: absolute;
right: 20px;
top: -10px;
}
#third{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
6.3固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
/*绝对定位：相对于浏览器*/
div:nth-of-type(1){
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
/*fixed固定定位*/
div:nth-of-type(2){
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
6.4z-index
图层
z-index：默认是0，最高无限
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<ul>
<li>
<img src="image/1.jpg" alt="">
</li>
<li class="tip">
学习
</li>
<li class="bb">
</li>
<li>时间：2022.9.3</li>
<li>地点：月球</li>
</ul>
</div>
</body>
</html>
opacity: 0.5;/背景透明度/
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tip,.bb{
position: absolute;
width: 380px;
top: 200px;
height: 20px;
}
.bb{
background: black;
}
.tip{
color: white;
z-index: 999;
}
.bb{
background: black;
opacity: 0.5;/*背景透明度*/
filter: alpha(opacity=50);
}
标签：定位,solid,1px,CSS,position,border,red 来源： https://www.cnblogs.com/cyh822blogs/p/16654244.html