<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 200px;
background-color: skyblue;
}
div:first-child{
position: static;
}
div:nth-child(2){
/*固定定位*/
position: fixed;
right: 10px;
bottom: 10px;
}
div:nth-child(3){
/*相对定位*/
position: relative;
left: 10px;
top:20px;
}
div:nth-child(4){
/*绝对定位 最近的定位祖先元素 左上点*/
position: absolute;
left: 10px;
top: 10px;
background-color: red;
/*设置堆叠顺序*/
/*z-index: 100;*/
}
.outer{
width: 300px;
height: 300px;
background-color: gold;
/*设置祖先定位元素*/
position: relative;
}
.outer div{
position: absolute;
left: 20px;
top: 10px;
}
</style>
</head>
<body>
<div>static</div>
<div>fixed</div>
<div>relative</div>
<div>absolute</div>
<!-- 测试定位祖先元素对绝对定位元素的影响 -->
<div class="outer">
<div>absolute2</div>
</div>
<div>正常</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 200px;
background-color: skyblue;
}
div:first-child{
position: static;
}
div:nth-child(2){
/*固定定位*/
position: fixed;
right: 10px;
bottom: 10px;
}
div:nth-child(3){
/*相对定位*/
position: relative;
left: 10px;
top:20px;
}
div:nth-child(4){
/*绝对定位 最近的定位祖先元素 左上点*/
position: absolute;
left: 10px;
top: 10px;
background-color: red;
/*设置堆叠顺序*/
/*z-index: 100;*/
}
.outer{
width: 300px;
height: 300px;
background-color: gold;
/*设置祖先定位元素*/
position: relative;
}
.outer div{
position: absolute;
left: 20px;
top: 10px;
}
</style>
</head>
<body>
<div>static</div>
<div>fixed</div>
<div>relative</div>
<div>absolute</div>
<!-- 测试定位祖先元素对绝对定位元素的影响 -->
<div class="outer">
<div>absolute2</div>
</div>
<div>正常</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>