When the whole world is about to rain, let's make it clear in our heart together

热爱前端开发,专注于前端

css注意问题--position定位

如果要某一个div,固定在最上面,鼠标移动,div保持不动的方法:

1:position:fixed

2:设置position:absolute,且控制div.style.top=document.body.scrollTop||document.documentElement.scrollTop

3:如下代码:

   主要就是利用 absolute 定位 以 html 为 准 ,body属于 html的子容器,我们需要滚动条出现在 body 上,而不是html上,这样才能

以html绝对定位 到某一位置,拖动 body的滚动条时不会影响 以html定位的元素。

<!DOCTYPE html>  
<html>  
<head>  
<style type="text/css">  
*{margin:0;padding:0;}  
html,body {height:100%;overflow:hidden;}  
body {overflow:auto;};  
  
</style>  
</head>  
<body>  
<div id="wrapper">  
<h1><a href="#">很长</a></h1>  
<p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p>  
<p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p>
<
p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p>
<
p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p> <p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p>
<
p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p> <p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p>
<
p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p><p>很长</p> </div> <div style="position:absolute;bottom:0;border:2px green solid;"> 我是尾巴 </div> </body> </html>

 

posted @ 2016-05-11 13:42  婷风  阅读(277)  评论(0编辑  收藏  举报