相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--相对定位
相对于自己原来的位置进行偏移
-->
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px #666 solid;
}
#first{
border: 1px #e6301a dashed;
background-color: #56d4da;
position: relative;/*相对定位:上下左右*/
top: -20px;
left: 20px;
}
#second{
border: 1px #69df5a dashed;
background-color: #da3a9d;
}
#third{
border: 1px #201eda dashed;
background-color: #d5dad1;
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>
相对定位:position: relative;
相对于原来的位置,进行指定的偏移
相对定位,任然在标准文档流中
top: -20px;
left: 20px;
bottom -10px;
right: 20px;
绝对定位
定位:基于xxx定位,上下左右
1.没有父级元素定位的前提下,相对于浏览器定位
2.假如父级元素存在定位,通常相对于父级元素定位
3.在父级元素范围内移动
相对于父级或浏览器的位置,进行指定的偏移 绝对定位的话,它不在标准文档流中,原来的位置不会被保留。
position:absolute;
固定定位 fixed
<!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;
}
div:nth-of-type(2){
/*fixed,固定定位*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
z-index
z-index:默认是零,最高无限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/a.PNG" alt=""></li>
<li class="tipText">学习css</li>
<li class="tipBg"></li>
<li>时间:2099-01-01</li>
<li>地点:China</li>
</ul>
</div>
</body>
</html>
#content{
width: 380px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000000 solid;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 380px;
height: 25px;
top: 100px;
}
.tipText{
color: white;
/*z-index: 0;*/
}
.tipBg{
background: #000;
/*背景透明度*/
/*或者:
了解:filter: alpha(opacity=50);
*/
opacity: 0.5;
}