DIV(CSS 定位)

<div style="position: relative;width:800px;height: 300px;background-color: gainsboro;border:1px solid red;margin: 0 auto">
    <div style="position: absolute;width:100px;height: 100px;bottom: 0;left: 0;background-color: brown">
    </div>
</div>


<div style="position: relative;width:800px;height: 300px;background-color: gainsboro;border:1px solid red;margin: 0 auto">
    <div style="position: absolute;width:100px;height: 100px;top: 0;right: 0;background-color: brown">
    </div>
</div>


<div style="position: relative;width:800px;height: 300px;background-color: gainsboro;border:1px solid red;margin: 0 auto">
    <div style="position: absolute;width:100px;height: 100px;bottom:0;background-color: brown">
    </div>
</div>

当需要下层DIV在上层DIV中定位时，上层DIV使用relative,下层DIV使用absolute.配合TOP,LEFT,RIGHT,BOTTOM定位。

<div style="z-index: 10;position: fixed;top: 50%;left:50%;margin-top:-200px;margin-left:-200px;background-color: white;width: 200px;height: 200px;"></div>
<div style="z-index:9;position: fixed;background-color: black;top: 0;bottom:0;right:0;left:0;opacity: 0.5;"></div>
<div style="height: 400px;width: 800px;background-color: darkcyan"></div>

opacity:0.5 --->透明度

Z-INDEX 数据越大，DIV在最顶层。