CSS中div覆盖另一个div

简介:

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

目录
相关文章
|
6月前
|
前端开发
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
67 0
|
23天前
|
前端开发
CSS3:hover&demo
本文介绍了CSS中`hover`伪类的基本用法,包括改变元素自身样式、影响子元素及相邻或后续兄弟元素样式的技巧。同时,还探讨了`:before`和`:after`伪元素的使用方法,以及如何通过CSS实现边框流动效果、创建登录页面、设计轮盘游戏界面和平滑处理文本溢出等实用案例。每个示例都配有代码块,便于理解和实践。
|
4月前
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
207 3
|
6月前
|
JavaScript
为什么把script标签放在div下面?
为什么把script标签放在div下面?
|
6月前
|
前端开发 小程序
css div添加滚动条(附加源码)
css div添加滚动条(附加源码)
82 0
|
12月前
|
前端开发
CSS写一个缺角的div
CSS写一个缺角的div
130 1
|
前端开发
css控制div内容最多为2行
css控制div内容最多为2行
111 0
|
前端开发
仅使用一个 DIV 配合 CSS 实现饼状图
完整的代码请滑到文末。我们只使用一个div,仅采用css实现饼状图。
仅使用一个 DIV 配合 CSS 实现饼状图
|
前端开发
css如何让div显示在最上层
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34173549/article/details/80034493 方法:设置div样式 z-index:autoauto可定义为一个值(整数数字),越大代表越置前,如可定义为: z-index:999。
2654 0