DIV(CSS 定位)

最新推荐文章于 2024-09-01 19:28:10 发布

weixin_30432179

最新推荐文章于 2024-09-01 19:28:10 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/GabyGU/p/7786861.html

本文介绍了如何使用CSS的relative和absolute属性进行元素定位，并通过TOP、LEFT等属性精确控制位置。此外，还讲解了如何利用Z-INDEX实现层叠效果，使某些元素覆盖在其他元素之上。

<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>