Rumah > Artikel > hujung hadapan web > CSS中如何使div覆盖另一个div的实例
CSS中如何使div覆盖另一个div的实例
- 黄舟asal
- 2017-07-22 10:44:074383semak imbas
将一个p覆盖在另一个p上有两种手段：一是设置margin为负值，二是设置绝对定位。
可以根个人情况设置z-index的值
1->position 为absolute的情况
<html>
<head>
<style>
#p1{position:absolute;width:300px;height:300px;background:#ccc;}
#p2{position:absolute;left:0;top:0;width:200px;height:200px;background:red;filter:alpha(opacity=50);}
</style>
</head>
<body>
<pid="p1">这里是p1的内容
<pid="p2"></p>
</p>
</body>
</html>2->用margin为负的操作
<html>
<head>
<style>
#p1 {position:relative; width:300px; height:300px;background:#ccc;}
#p2 {position:relative; left:0; top:0;margin-top:-15px;width:200px; height:200px; background:red;filter:alpha(opacity=50);}
</style>
</head>
<body>
<pid="p1"> 这里是p1的内容
<pid="p2"></p>
</p>
</body>
</html>Atas ialah kandungan terperinci CSS中如何使div覆盖另一个div的实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css中类选择器是如何使用的实例详解Artikel seterusnya：分享CSS中关于样式覆盖原则的具体介绍