day15-CSS之possition

一、引子

　　上回我们说到position 属性，让标签固定在某个位置，今天我们来说说它的两个延伸例子。

1.菜单顶置，类似execl 表头

2.点击网页时，弹出对话框，只能编辑对话框，其它地方半透明，无法点击。

二、开始举栗子

2.1.菜单top,

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div style="background-color: aquamarine;color: black;
 9         position: fixed;
10         width: 96%;
11         height: 28px;
12         top: 1px">
13         top menu
14     </div>
15 
16     <div style="height: 5000px;background-color: #dddddd;
17         color: red;
18         margin-top: 30px;">
19         page body
20     </div>
21 
22 </body>
23 </html>

步骤：1、定制一个div ,高度28px, 宽度96%,利用 possition ：fixed 让标签固定在顶部。

　　　2、定制页面内容， margin-top：30px, 否则，页面内容会被顶置的标签挡住。

效果如下：

 

2.2、搞第二个栗子

　　需要实现的效果如下：

　　我们先不管底层的内容，我们以现在所学到的知识，实现上面两侧。后面学到了js ,会搞一个完整的栗子。

a、先搞一个蒙层，把整个底层内容都覆盖，用到了position：fixed; 上下左右都是0，

1     <div style="z-index:10;background-color: #000000;
2         position: fixed;
3         top:0;
4         left: 0;
5         right: 0;
6         bottom: 0;
7         opacity: 0.3">
8     </div>

　　PS:opacity 是透明度，0-1，越大越不透明。z-index：页面的优先级，越大，越在上面，

b、搞一个弹出的对话小框框

1  <div  style="z-index:11;background-color:white;position: fixed;width: 500px;height: 400px;
2                 top:50%;left: 50%;
3                 margin-top: -200px;
4                 margin-left: -250px;">
5     </div>

　　ps:这里的 z-index ：11  大于上面的10,确保弹出来的对话框在蒙层 上面，用户才可以操作。效果如下

 

 

posted @ 2018-05-21 09:52  东郭仔  阅读(393)  评论(0)    收藏  举报