fiexd:固定在页面的某个位置
relative+absolute:2者之间的相对定位
层叠样式表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div onclick="GoTop();" style="50px;height: 50px;background-color: aqua;color:white; position: fixed; bottom:20px; right:20px; ">返回顶部</div> <!--position 层叠样式表--> <!--position: fixed;--> <!--top:0;--> <!--right:0 ;--> <div style="height: 5000px;background-color: purple"></div> <script> function GoTop(){ document.body.scrollTop=0; } </script> </body> </html>
层叠样式表2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ background-color: purple; height: 48px; position: fixed; top:0; left:0; right: 0; } .pg-body{ background-color: green; height: 3000px; margin-top: 50px; } </style> </head> <body> <div class="pg-header">头部</div> <div class="pg-body">内容</div> </body> </html>
层叠样式表3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="position: relative;500px;height:200px;border:1px solid red;margin: 0 auto;"> <div style="position: absolute;left: 0;bottom: 0;50px;height: 50px;background-color: blue;"> </div> </div> <div style="position: relative;500px;height:200px;border:1px solid red;margin: 0 auto;"> <div style="position: absolute;left: 0;bottom: 0;50px;height: 50px;background-color: yellow;"> </div> </div> <div style="position: relative;500px;height:200px;border:1px solid red;margin: 0 auto;"> <div style="position: absolute;right: 0;bottom: 0;50px;height: 50px;background-color: orangered;"> </div> </div> <div style="position: relative;500px;height:200px;border:1px solid red;margin: 0 auto;"> <div style="position: absolute;left: 0;bottom: 0;50px;height: 50px;background-color: pink;"> </div> </div> <div style="position: relative;500px;height:200px;border:1px solid red;margin: 0 auto;"> <div style="position: absolute;left: 0;bottom: 0;50px;height: 50px;background-color: brown;"> </div></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="z-index:10;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-200px; background-color:white;height: 400px;500px"> <input type="text"/> <input type="text"/> <input type="text"/> </div> <div style="z-index:9;position:fixed;background-color: black; top:0; bottom:0; right:0; left:0; opacity:0.6; /*opacity:0.6;透明度*/ ">测试标签1</div> <div style="z-index:8;height: 6000px;background-color: orange">测试标签2</div> </body> </html>