将一个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. [svg翻译教程]椭圆（ellipse元素）和线（line元素）

    line 先看个例子,这是svg中最简单的线 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http:/ ...

  2. ADO.NET-SqlHelper

    class Sqlhelper { //数据库连接字符 private static string connstr = ConfigurationManager.ConnectionStrings[& ...

  3. 关于nginx.pid丢失的解决办法

    在停掉nginx的过程中突然出现如下的提示:

  4. Web开发者需养成的好习惯

    Web开发者需养成的8个好习惯 每个行业有着每个行业的标准和一些要求,自己只是一个进入前端领域的小白,但是深刻的知道,习惯很重要,就Web开发分享一下,要养成的一些好的习惯. 优秀的Web开发人员工作 ...

  5. c#中abstract与virtua、overridel的用法

    1.abstract 抽象方法 ,virtual 虚方法 ,override 重载函数 父类A.m() 子类B.m()   abstract的方法父类可以不实现,让子类去重写(重写=overwrite ...

  6. 领域驱动有感<上>

    最近看了<领域驱动设计:软件核心复杂性应对之道>,从字面上来看领域驱动就是解决软件复杂性问题的:然而领域驱动设计的门槛很高,没有很深厚的面向对象编码能力几乎不可能实践成功.Martin F ...

  7. maven内部运行原理解析

    maven至今还是Java编程语言构建的事实标准,大部分项目还在使用maven来进行构建,因此了解maven内部运行的原理对定位和分析问题还是很有裨益的.本篇文章主要介绍一些maven内部运行过程中的 ...

  8. Android Gson解析

    目前解析json有三种工具:org.json(Java常用的解析),fastjson(阿里巴巴工程师开发的),Gson(Google官网出的),解析速度最快的是Gson,下载地址:https://co ...

  9. jquery 无刷新多级联动

    原先不熟悉jquery时,总在寻找无刷新的方法,在此不断的积累自己所知道的jquery属性,常用方法.以下为jquery实现的无刷新联动事件 分公司: <select id="Sele ...

  10. SQL Server 高级sql总结

    ----------------------------------------------------------------------Select------------------------ ...