<!--<!DOCTYPE html>--> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div onclick="Gotop();" style=" 50px;height: 50px;background-color: black;color: white;position: fixed ;bottom: 20px; right: 20px; ">返回顶部</div> <div style="height: 5000px;background-color: #dddddd">safsafas</div> <script> function Gotop() { document.body.scrollTop =0; // document.documentElement.scrollTop = 0; } </script> </body> </html>
要注掉<!--<!DOCTYPE html>-->；document.body.scrollTop =0;才生效。否则使用 document.documentElement.scrollTop = 0;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="position: relative; 700px;height: 200px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute;left: 0;bottom: 0; 50px;height: 50px;background-color: black"></div> </div> <div style="position: relative; 700px;height: 200px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute; 50px;height: 50px;background-color: #4371A6;right: 0;top: 0"></div> </div> <div style="position: relative; 700px;height: 200px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute; 50px;height: 50px;background-color: #9932CC;left: 0;bottom: 0"></div> </div> </body> </html>
position：
fixed 固定在浏览器某个位置
absolute 紧跟滑轮滑动。
relative +absolute absolute和relative联合使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ background-color: #4371A6; height: 48px; position: fixed; color: #FF7F24; top: 0; left: 0; right: 0; } .pg-body{ background-color: lightgray; height: 5000px; margin-top: 90px; width: 100%; } </style> </head> <body> <div class="pg-header">头部</div> <div class="pg-body">内容</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title4</title> </head> <body> <div style="z-index: 10;height: 400px; 500px;position: fixed;background-color: white;top: 50%;left: 50%;margin-left: -250px ;margin-top: -200px"> <input type="text"> <input type="text"> <input type="text"> </div> <div style="z-index: 9;osition: fixed;background-color: black; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.5; "></div> <div style="height: 5000px;background-color: olivedrab">safsafas</div> </body> </html>
opcity:0.5 透明度
z-index：层级操作优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 200px; 300px;overflow: auto"> <img src="../14/html/1.jpg" > </div> </body> </html>
overflow：hidden 超过部分隐藏
auto 超过部分出现滚动条