我们知道,固定定位是相对于屏幕的。但是,怎么才能实现相对于当前父元素呢?那就是不使用top left bottom right。而是使用margin-top margin-left margin-bottom margin-right
直接上代码,测试一下,你会恍然大悟!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.father{
top:100px;
position: absolute;
display: block;
width: 200px;
height: 200px;
background: red;
}
.sun{
position: fixed;
margin-left: 100px;
display: block;
width: 100px;
height: 100px;
background:blue;
}
</style>
</head>
<body>
<div class="father">
<div class="sun">
</div>
</div>
</body>
</html>
快去试试把~