版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/heiyouhei123/article/details/82017608
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.level1 {
padding-top: 10px;
background-color: red;
height: 70px;
}
.level2 {
background-color: #3dff26;
height: 50px;
}
.level3-0 {
background-color: black;
color:white;
height: 30px;
/*这里为什么需要设置width的长度是因为，block-level的元素的宽度默认继承父元素的，因为当前是相对于document,document的长度为0,所以这里需要显示指定*/
width: 200px;
position: absolute;
top: 0px;
}
.level3-1 {
background-color: #fdfbff;
position: relative;
top: 20px;
left: 20px;
}
.level3-2 {
background-color: #0fa4ff;
height: 20px;
}
.level4 {
position: fixed;
/*默认的top, left,bottom,right 的值实现相对于包含的元素的，通常需要进行显示的设置*/
right: 0px;
background-color: #dd6149;
}
</style>
</head>
<body>
<div class="level1">
<div class="level2">
<div class="level3-0">level 3-0</div>
<div class="level3-1">level 3-1</div>
<div class="level3-2">
level 3-2
<div class="level4">level 4</div>
</div>
</div>
</div>
</body>
</html>
页面效果:
参考:
1. Css Tricks Position
2. Default Top/Right/Bottom/Left value for position:fixed