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>