代码:
<style type="text/css"> .Box{ position: relative; width: 200px; height: 200px; background-color: red; } .Shade{ position: absolute; top: 0; width: 100%; height: 100%; background-color: #333; opacity: 0.3; } </style> <div class="Box"> <div class="Shade"></div> <div> <p>被遮罩元素</p> <button type="button">OK</button> <p>被遮罩元素</p> </div> </div>
总结:
这里主要是 position 的使用技巧,针对该属性在下面做个总结:
-
- static 默认情况下元素使用的是该属性值;
- relative 表明该元素还在自己的文档流中,只是相对于之前自己的位置进行的偏移
- absolute 表明该元素不在文档流中,是相对于已定位的祖先元素的偏移量;如果族
先元素没有使用position定位,怎该元素会相对于文档来进行定位 - fixed 针对浏览器的窗口进行定义