模拟position:fixed效果

大家都知道fixed定位相对于浏览器窗口,下面就介绍一种不用fixed也能实现其效果的定位方法,就那点css代码,这里就直接呼上来:

<!DOCTYPE html>
<html>
<head>
<title>模拟fixed定位</title>
<style type="text/css">
html{
    height:100%;
    overflow:hidden;
}
body{
    height:100%;
    overflow:auto;
}
.box { 
    position:absolute;
    top:100px;
    left:300px;
    width:260px;
    background: red;
    text-align: center;
}
</style>
</head>
<body>
<div class="box">虽然没用fixed,但依然固定不变</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
原文地址:https://www.cnblogs.com/chayangge/p/4304544.html