属性才生效 ! DOCTYPE html html lang ="en" head meta charset ="UTF
fixed：把标签固定在页面的某处
例子：使用fixed制作“回到顶部”按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div onclick="GoTop();" style="width:50px;height:50px;background-color:black;color:white; position:fixed;bottom:20px;right:20px"> 返回顶部 </div> <div style="height:5000px;background-color:#dddddd"> ddfdfdadfdf </div> <script> function GoTop(){ document.documentElement.scrollTop = 0; console.log(document.documentElement.scrollTop) } </script> </body> </html>
例子2：固定页面头部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .pg-header{ height:48px; background-color:black; color:#dddddd; position:fixed; top:0; right:0; left:0; } .pg-body{ background-color:#dddddd; height:5000px; margin-top:50px; } </style> </head> <body> <div class="pg-header">头部</div> <div class="pg-body">内容</div> </body> </html>
absolute：把标签固定在页面的某处，位置是绝对固定的
relative：凡是和absolute一起用
<div style=‘position:relative;‘><div style=‘position:absolut;top:0,right:0;‘></div>
<div/>
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="width:50px;height:50px; background-color:black; position:absolute; right:0; bottom:0;"> </div> <div style="margin:0 auto;position:relative;width:500px;height:200px;border:1px solid red;"> <div style="position:absolute;left:0;bottom:0;width:50px;height:50px;background-color:black;"></div> </div> <div style="margin:0 auto;position:relative;width:500px;height:200px;border:1px solid red;"> <div style="position:absolute;right:0;bottom:0;width:50px;height:50px;background-color:blue;"></div> </div> <div style="margin:0 auto;position:relative;width:500px;height:200px;border:1px solid red;"> <div style="position:absolute;right:0;top:0;width:50px;height:50px;background-color:blue;"></div> </div> <div style="height:5000px;background-color:#dddddd;"> ddfdfdadfdf </div> </body> </html>
页面分层显示：
z-index
opacity 透明 值：0-1
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/29333.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")