position：fixed固定标签位置(又起了一层)，有top、left、right、bottom
#固定在顶部
<div style="height: 50px;background-color: cornflowerblue;color: black;position: fixed;left: 0;right: 0;top: 0">dd</div>
#当页面内容很多时，用于快速返回顶部。以下js在chrominum；其它是：document.body.scrollTop = 0 <div onclick="GoTop();" style="height: 50px; 50px;background-color: black;color: white;position: fixed;bottom: 10px;right: 10px">返回顶部</div> <script>function GoTop() {document.documentElement.scrollTop = 0;}</script>
position：外标签relative，内标签absolute相对于外标签位置定位
position：多层样式。z-index数字大的显示在最外层opacity透明度范围0-1.如下共有三层
<div style="z-index: 3;position: fixed;left: 50%;top: 20%;margin-left: -150px;height: 300px; 300px;background-color: cornflowerblue"></div> <div style="z-index: 2;position: fixed;top: 0;left: 0;right: 0;bottom: 0;opacity:0.8;background-color: beige"></div> <div style="height: 5000px;">lslslslsl</div>
overflow：hidden（超过规定大小隐藏），auto（超过规定大小使用滚动条）
hover：悬停的意思。鼠标停在标签上显示着重色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ background-color: dodgerblue; height: 50px; top: 0; left: 0; right: 0; position: fixed; } .pg-body{ margin-top: 52px; } .w{ width: 980px; margin: 0 auto; line-height: 50px; } .pg-header .menu{ display: inline-block; padding: 0 5px; color: white; } .pg-header .menu:hover{ background-color: blue; } </style> </head> <body> <div class="pg-header"> <div class="w"> <a class="logo">LOGO</a> <a class="menu">全部</a> <a class="menu">42区</a> <a class="menu">段子</a> <a class="menu">图片</a> </div> </div> <div class="pg-body"> <div class="w">123</div> </div> </body> </html>
background：
background-imag：url（‘路径/1.png’）；默认div大，图片重复放
background-repeat：repeat-y；no-repeat
background-position-x：1px；
background-position-y：1px；