模拟position:fixed效果

时间:2023-03-10 07:13:31
模拟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>