定位
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 #666;
padding: 0;
}
#first{
border: 1px dashed orange;
background-color: #FC00FF;
position: relative; /*相对定位:上下左右*/
top: -20px;
left: 20px;
}
#second{
border: 1px dashed greenyellow;
background-color: brown;
}
#third{
border: 1px dashed aqua;
background-color: rosybrown;
position: relative;
bottom: 10px;
right: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
相对定位的偏移指的是距离指定方向的距离，如right:10px指的是距离右侧10px，即向左偏移10px
相对定位：position:relative;
top: -20px;
left: 20px;
bottom: 10px;
right: 20px;
相对定位的话，它仍然在标准文档流中，原来的位置会被保留
2. 绝对定位
定位：基于XXX定位，上下左右
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 #666;
padding: 0;
/*父级元素存在相对定位*/
position: relative;
}
#first{
border: 1px dashed orange;
background-color: #FC00FF;
}
#second{
border: 1px dashed greenyellow;
background-color: brown;
position: absolute;
right: 30px;
}
#third{
border: 1px dashed aqua;
background-color: rosybrown;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
3. 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 3000px;
}
/*绝对定位，相对于浏览器*/
div:nth-of-type(1){
100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
/*固定定位，fixed*/
div:nth-of-type(2){
50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
4. z-index
图层
z-index：默认是0，最高是无限，数字越大优先级越高
/*背景透明度*/
opacity: 0.5;
<!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="images/timg.jpg" alt="">
<li class="tipText">这是一张背景图片</li>
<li class="tipBg"></li>
<li>时间：2020-8-4</li>
<li>地点：XXXXXXX</li>
</ul>
</div>
</body>
</html>
#content{
380px;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid black;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
/*子级元素相对于父级元素绝对定位*/
.tipText,.tipBg{
position: absolute;
380px;
height: 25px;
top: 640px;
}
.tipText{
color: wheat;
z-index: 999;
}
.tipBg{
background: black;
/*背景透明度*/
opacity: 0.5;
/*下面的写法只有IE8之前的浏览器支持，如果项目有可能在老的浏览器上进行，最好两个都写*/
filter: alpha(opacity=50);
}