将一个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>

CSS中div覆盖另一个div的更多相关文章

  1. JaveWeb 公司项目（1）----- 使Div覆盖另一个Div完成切换效果

    最近在做网页,用的是CSS+DIV的布局方法,搭建了一个简易的界面,大体上分为三个部分,如图所示: 左侧的为主功能导航栏,右侧是具体的功能实现,下方是固定的版权声明,单击左边不同的导航按钮,在div中 ...

  2. 一个div在另一个div中水平垂直的方法

    html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...

  3. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  4. 怎样把一个DIV放到另一个div右下角

    怎样把一个DIV放到另一个div右下角??? 借助CSS定位来实现,你将右下角的那个DIV放在另一个DIV里面,参考代码如下示: <div id="box1"> < ...

  5. 点击一个div隐藏另一个div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. css笔记：如何让一个div居于页面正中间

    如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,left属性都设为50%,看一下效果 ...

  7. CSS的力量：用一个DIV画图

    这些图片都是用一个DIV绘制出来的,其实原理并不复杂. 这些图片都是由CSS绘制出来的,通过background-image叠加实现, 如蘑菇头的实现,通过 radial-gradient 径向渐变  ...

  8. 关于页面布局中，如何让一个div水平和垂直居中的五个方案

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 一个div居于另一个div底部

    一个div如何与另一个div底部对齐,方法有很多,比如使用绝对定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

随机推荐

  1. windows 10 开始菜单和cortana无法工作的问题

    过了个周末,到了实验室一开机发现报了个关键错误:开始菜单和cortana无法工作. 经过一番google ,发现问题,原来是360禁用了一个服务导致,这个服务是UserManager. 我直接去开启发 ...

  2. mvc 返回值

    mvc返回值为Model类型 public ActionResult Index(T result) { return View(result); } view中的对象即为页面中的Model数据,之后 ...

  3. RN 项目导入WebStorm 组件没有依赖

    你需要在项目根目录   $ npm instal 恭喜你完成 但是依然报错 npm config set registry="registry.npmjs.org"  重新配置了一 ...

  4. JavaScript笔试必备语句【转】

    1. document.write( " "); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document- >html- >(head,bod ...

  5. _MSC_VER详细介绍

    _MSC_VER详细介绍 转自:http://www.cnblogs.com/braver/articles/2064817.html _MSC_VER是微软的预编译控制. _MSC_VER可以分解为 ...

  6. django 在字符串[str(list)]中精确查找

    1.问题描述 1.1表结构 1.2问题 ref_list为id列表的字符串,需要从ref_list中找出包含指定id的数据(eg id=8).如果实用models.objects.filter(ref ...

  7. Android通用流行框架大全

    1. 缓存 名称 描述 DiskLruCache Java实现基于LRU的磁盘缓存 2.图片加载 名称 描述 Android Universal Image Loader 一个强大的加载,缓存,展示图 ...

  8. .Net程序员之不学Java做安卓开发:奇怪的Java语法

    1.final关键字:用以修饰类时,表示类不可以被继承,指向基本数据类型或者引用类型时,该类只可以在声明的时候初始化 2.@Override 类似C# 中override关键字,表示对父类的重写.网上 ...

  9. Red Hat5下源码安装mysql5.6过程记录

    1.安装cmake包 [root@edu soft]# tar -xzf cmake-.tar.Z [root@edu soft]# cd cmake- [root@edu cmake-]# ./co ...

  10. checkbox选中状态不被改变

    让它的状态只能看不能改变,加上onclick="return false;". 也可以disabled="true";但是这个颜色变淡了; <input ...