fixed的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ background-color: red; height: 48px; /*添加position后可以使该div与其他div处于屏幕的不同层，fixed为将该div固定到浏览器窗口的指定位置， top、bottom、right、left四个方位代表了离屏幕有多少距离*/ position: fixed; top: 0px; right: 0px; left: 0px; } .pg-body{ background-color: darkgray; height: 5000px; margin-top: 50px; } .pg-back_to_top { background-color: black; color: white; height: 50px; width: 50px; position: fixed; right: 10px; bottom: 10px; } </style> </head> <body> <div class="pg-header">标题</div> <div class="pg-body">内容</div> <div onclick="GoTop();" class="pg-back_to_top">返回顶部</div> <script> function GoTop(){ console.log("123") document.documentElement.scrollTop = 0; } </script> </body> </html>
absolute和relative用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--position的relative如果单独使用，没有任何效果，因为它是自己定义自己，对div自己没有任何实际意义。 但如果这个div的内部还有div，而且这个内部的div想要定义自己相对于父div的位置，就需要在自己的position 属性添加absolute--> <div style="position:relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute;bottom: 0px; 50px;height: 50px;background-color: black"></div> </div> <div style="position:relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute;top: 0px;right: 0px; 50px;height: 50px;background-color: black"></div> </div> <div style="position:relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute;top: 0px; 50px;height: 50px;background-color: black"></div> </div> </body> </html>e
z-index属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--z-index可以设置层级页面的优先级，值越大，优先级越高，优先级高的放在最上面--> <div style="z-index: 10;background-color: white;position: fixed;height: 200px; 400px; top: 50%;left: 50%;margin-top: -200px;margin-left: -200px"> <input type="text"/> <input type="text"/> <input type="text"/> </div> <div style="z-index:9;position: fixed;background-color: darkgray; top: 0; bottom: 0; left: 0; right: 0; /*opacity属性为设置div的透明度，值越大，背景色越深*/ opacity: 0.5"></div> <div style="height: 5000px;background-color: green">第一层页面</div> </body> </html>