博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS中div覆盖另一个div
阅读量:6989 次
发布时间:2019-06-27

本文共 707 字,大约阅读时间需要 2 分钟。

将一个div覆盖在另一个div上有两种手段:一是设置margin为负值,二是设置绝对定位。

可以根个人情况设置z-index的值

1->position 为absolute的情况

<html>

<head>

<style>

#div1{position:absolute;width:300px;height:300px;background:#ccc;}

#div2{position:absolute;left:0;top:0;width:200px;height:200px;background:red;filter:alpha(opacity=50);}

</style>

</head>

<body>

<divid="div1">这里是div1的内容

          <divid="div2"></div>

</div>

</body>

</html>

2->用margin为负的操作

<html>

<head>
    <style>
    #div1 { position:relative; width:300px; height:300px; background:#ccc;}
    #div2 { position:relative; left:0; top:0;margin-top:-15px; width:200px; height:200px; background:red;filter:alpha(opacity=50);}
    </style>
</head>
<body>
<divid="div1"> 这里是div1的内容
          <divid="div2"></div>
</div>
</body>
</html>

转载地址:http://klzvl.baihongyu.com/

你可能感兴趣的文章
决心书
查看>>
介绍遍历子表的方法
查看>>
网络的分类
查看>>
PGSQL创建自增的id-- postgresql nextval 使用
查看>>
12python程序另一种运行方式
查看>>
Tomcat高级应用(添加虚拟主机及优化)
查看>>
Kindeditor(jsp)与SSH三大框架整合上传图片出错问题解决方案
查看>>
Mongodb基操--将复制集与节点选举玩弄于股掌之中
查看>>
SSM框架Spring+SpringMVC+MyBatis——详细整合教程
查看>>
winXP系统如何打开剪贴板查看器
查看>>
eyoucms网站基本信息设置
查看>>
Io流中的其他流
查看>>
55-高级路由:分发列表:DV协议应用
查看>>
如何优雅地实现分页查询
查看>>
DNS负载均衡
查看>>
正则表达式和通配符
查看>>
回收站的东西如何恢复?教你几个实用的
查看>>
Mysql和Oracle数据库concat()函数
查看>>
研究显示AI正创造更多工作岗位
查看>>
DB2 SQL statement too long or complex.
查看>>