css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)

简介: css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)

问题描述

今天遇到一个问题,我的底部di放的是一个背景图片,上面(顶部)的这个div想在背景图像显示文字或者其他样式之类的,但是我magin-top 移动上之后开始不显示,上源码!

解决方案

在底部的div样式中添加如下代码,你只需要在你的代码中添加这一行代码即可position: relative;

position: relative;

完整版代码如下(方便看的更清楚一些这段是完整版源码,你只需要加上面那一行代码即可):

.beijing-img{
  height: 270rpx;
  margin-top: -80rpx;
  position: relative; /* 添加这一行,创建新的堆叠上下文 */
}

在顶部的div样式中添加如下代码,你只需要在你的代码中添加这两行代码即可position: relative;z-index: 1;

这样就可以实现在背景图上显示其它样式,如果你的不是背景图div也类似,加上这两段代码试一下!

position: relative;
z-index: 1;

完整版代码如下:

.dengluxinxi-view{
  height: 80rpx;
  width: 370rpx;
  line-height: 45rpx;
  padding: 20rpx;
  position: relative; /* 添加这一行,创建新的堆叠上下文 */
  z-index: 1; /* 添加这一行,设置层叠顺序 */
}
目录
相关文章
|
4月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
124 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
30天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
3月前
div+css3制作的简洁404错误页面特效源码
div+css3制作的简洁404错误页面特效源码是一段实现了非常简单也大方的效果的网站404错误页面效果代码,当鼠标经过404数字时,该数字会发光发亮,本段代码适应于所有网站使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
33 1
|
3月前
|
前端开发 JavaScript UED
|
4月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
477 1
|
4月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
121 2
|
3月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过<head>部分的<style>标签定义;外部样式表适用于多个页面,通过<link>标签引用外部CSS文件;<style>定义样式,<link>引用资源;已弃用的标签有<font>、<center>、<strike>,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。

热门文章

最新文章