模拟position:fixed效果

最新推荐文章于 2021-11-23 18:30:00 发布

weixin_33762130

最新推荐文章于 2021-11-23 18:30:00 发布

阅读量106

点赞数

原文链接：http://www.cnblogs.com/chayangge/p/4304544.html

版权

大家都知道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>