将一个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. WP8解析XML格式文件

    DOTA2 WebAPI请求返回的格式有两种,一种是XML,一种是JSON,默认是返回JSON格式,如果要返回XML格式的话,需要在加上format=xml. 这里举一个简单的解析XML格式的例子(更 ...

  2. POJ 1979 题解

    Red and Black Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 31722   Accepted: 17298 D ...

  3. 关于ajax为什么会返回php整个源码

    ajax 程序:返回的是php文件输出的代码. 1. 注意:如果你的php文件包含了html代码或者说是输出了HTML代码,它都会返回给 AJAX. 2. 注意:是整个php文件.这意味着如果你的aj ...

  4. swfupload纠结bug总结

    上传控件传到客户端的信息在IE7下乱码: 服务端 HttpUtility.UrlEncode,客户端 decodeURIComponent 上传大文件报404错: 用fiddler截取发现提示: 最可 ...

  5. py2exe

    1- 生成单一的exe文件: pyinstaller.py -F d:\open_txt\t.py 2- 添加必要的搜索路径: pyinstaller.py -F -p D:\python27\Lib ...

  6. pythonchallenge 解谜 Level 2

    好吧,赶紧贴一下. #-*- coding:utf-8 -*- #代码版本均为python 3.5.1 #Level 2 import re file = open("Level 2.txt ...

  7. python Django session/cookie

    一, Cookie #cookie # def cook1(request): # print(request.COOKIES) # 查看cooke # # print(request.get_sig ...

  8. spring mvc + ehcache 利用注解实现缓存功能

    我的spring是3.1的,因为项目需求,需要在查询时候加上缓存,小白一个,完全没有用过缓存(ehcache),摸索了一天终于会了一点通过注解来使用ehcache进行缓存,立刻给记录下来. 首先 我的 ...

  9. 安卓 自定义AlertDialog对话框(加载提示框)

    AlertDialog有以下六种使用方法: 一.简单的AlertDialog(只显示一段简单的信息) 二.带按钮的AlertDialog(显示提示信息,让用户操作) 三.类似ListView的Aler ...

  10. ORA-01861: 文字与格式字符串不匹配

    问题:插入数据不成功 解决:借口实现类里面的sql语句带值放到数据库中运行,如果不成功是sql语句的错误.