CSS实现一个盒子遮盖另一个盒子的效果

最新推荐文章于 2023-01-29 20:56:47 发布
最新推荐文章于 2023-01-29 20:56:47 发布
阅读量7.4k 收藏 7
点赞数 4
分类专栏： 前端 Bug set 文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45812488/article/details/121524849
版权

需求分析

需要实现如下图所示效果，盒子A被盒子B遮盖一部分的效果。
在这里插入图片描述

需求实现

我们知道，盒子重叠问题可以用“子绝父相”来解决。父盒子设置为相对定位，子盒子设定为绝对定位。
然后我们再设置对应的top 或 bottom达到效果。
于是我们将最外层的大盒子设置为position:relative
里面的两个小盒子都设置为position:absolute，再给需要处理的盒子加上top，表示从包含它的定位元素（也就是父盒子）的顶部边缘往下放置60个像素，就实现了遮盖另一个盒子的效果了。
在这里插入图片描述

现在就实现我们想要的效果了。

参考文档

样例运行

辰九九
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于页面头部position:fixed遮挡兄弟元素问题
weixin_47091942的博客
05-24 4096
header { width: 100%; height: 60px; background-color: black; position: fixed; } article{ width: 100%; background-color:cornflowerblue; margin-top: 60px; } ` 2：给页面头部一个 top:0； 解决头部与兄弟元素重叠导致外边距合并使其给兄弟元素 上外边距后头部不被一起拖拽下来 header {
使用CSS3实现一个3D相册效果实例
09-24
本篇文章主要介绍了使用CSS3实现一个3D相册效果，小编觉得不错。这里整理了详细的代码,有需要的小伙伴可以参考下。
通过css动画实现一个表格滚动轮播效果
12-28
css动画的一个应用，与此前的css走马灯同样的内容。只是一次不同的应用，具体实现如下 <template> <section> <div class=box> <ul class=header> <li class=cell>序号</li> <li class=cell>姓名</li> <li class=cell>年龄</li> <li class=cell>性别</li> <li class=cell>专业</li> </ul>
css盒子模型图解
09-25
主要介绍了css盒子模型的使用方法,需要的朋友可以参考下
一个简单好看的纯CSS3翻书效果特效代码
03-20
效果描述： 好久没有看到如此高逼格的纯CSS3特效了 蛮精致的一款纯CSS3模拟书本翻页效果 如果看不到效果，建议用最新版的谷歌浏览器查看 使用方法： 1、将CSS样式引入到网页中 2、将index.html中的代码部分拷贝到你的网页中
css3实现多个元素依次显示效果
09-24
在css3中，我们使用animation与keyframes结合，可以给元素添加各种各样的动画效果。这篇文章主要介绍了css3实现多个元素依次显示效果,需要的朋友可以参考下
CSS实现一个简单loading动画效果
09-24
CSS的animation可以做出大多数的loading效果，今天脚本之家小编给大家带来了基于CSS实现一个简单loading动画效果，非常不错，需要的朋友参考下吧
cssday5
hulitong的博客
05-26 741
1.1为什么需要定位？ 提问： 以下情况使用标准流或者浮动能实现吗？ 某个元素可以自由的在一个盒子内任意位置摆放，并且压住其他盒子. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的 . 以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。 所以： 1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。 2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。 1.2 什么是定位 定位就是将盒子定在某个位置，也是摆盒子 1.3定位的组成 定位
解决头部使用 position:fixed； 固定定位后遮住下方内容的问题
热门推荐
最爱喝怡宝的博客
12-30 1万+
今天在做一个页面的时候，有一个效果是要让头部固定，但是在给了position:fixed; 后，继续往下写会发现下方内容有部分被头部遮住了，有两个办法可以解决这种问题 1.在头部下面给一个空的 div 给这个div设置高度，把页面撑开，这种方法是让头部刚好遮住的是这个空div，把内容放出来。 但是这种方法需要一点点调试高度，所以不推荐。 2.把整个要使用 position:fixed; 的盒子，用另一个盒子包起来 比如说我有一个头部区域，需要固定 <div class="head"&g
CSS盒子
qi_bai_jin的博客
09-29 668
介绍了CSS盒子模型，具体介绍了flex的运用
css盒子覆盖问题
weixin_42583802的博客
06-22 1362
css盒子覆盖问题
【html&css】定位
橘子SQ
07-28 311
【html&css】定位 一、定位的概念 定位需要的元素指定移动到某一个位置上去，实现一些元素的重叠操作。 将指定的元素放在固定的位置进行展示。 定位也会脱离文本流。 二、激活定位 激活定位需要使用关键字position 通过position激活定位一共有五个值 /*html默认值，没有定位，按正常的文本流规则*/ position:static; /*粘性定位*/ position:sticky; /*下面为用的最多的定位值*/ /*相对定位*/ position:relative; /*绝
php中div重叠,div相互覆盖,div与div盒子之间产生重叠覆盖现象的解决办法
weixin_39855796的博客
03-26 854
div覆盖div,出现div与div盒子之间产生重叠覆盖现象，而内容没有出现覆盖重叠现象原因与解决方法。可能你遇到过上下结构的布局，下面DIV内容重叠上面DIV内容上，也可能右面内容覆盖掉左面的DIV布局，形成DIV与DIV覆盖重叠现象，这些是什么问题如何解决？接下来博主将通过案例来演示这两种兼容性DIV覆盖重叠现象问题，并解释原因与解决方法。案例一、上下结构的DIV盒子覆盖1、首先，创建一个实例...
css盒子模型实验报告总结_html盒子模型和CSS难点总结
weixin_39916479的博客
12-29 1067
小马把写HTML了解为就是盒子的嵌套和堆叠，一切皆盒子。CSS定位和浮动小马觉得是前台里算难了解的一部分吧，在此总结复盘下。HTML盒子模型话不多说，直接上一段代码(参考来自这里)：div { width: 400px;height: 100px;border: 6px solid #949599;margin: 20px;padding: 20px;}效果(图片来自这里)：这里非常有趣，实际所...
css position
weixin_33981932的博客
10-25 77
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 ...
HTML+CSS系列实战之添加遮罩层
m0_48375854的博客
11-05 5177
        在这里我们将完成一个当鼠标经过某个图片时，图片添加遮罩层的效果。为了方便起见，小熊这里只写了两个盒子。         实现思路是：将遮罩的盒子覆盖在图片上，遮罩的盒子不占有位置，所以用绝对定位 和 display 配合使用。当鼠标经过时，让遮罩的盒子显示display:block，鼠标离开时，让遮罩的盒子隐藏display:none
CSS(九)盒子模型+CSS3新知识
司天宏的博客
01-12 143
标准盒子模型 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;sty
css设置z-index没有效果，解决div盒子被挡住了的问题
树上骑个猴的博客
10-26 3923
我有两个div，出现了下面的div挡住了上面的div，希望是上面的div把下面的div挡住，于是把上面div的z-index设大，但是没有效果。 解决方案： 经过查找发现，是因为下面的div设置了position: relative; 。于是把上面的div也设置position: relative;，此时再给上面的div设置z-index就能解决了。所以下次z-index发现没有效果的时候，看看有没有被定位被耽误了 ...
背景图片大小设置 解决背景图多张铺满盒子 背景图和背景颜色混用
m0_55751104的博客
01-29 2613
如果背景图没有占完屏幕的时候，还留有白边可以通过 background-color:;来把颜色设置成与背景图一致的颜色。top center 等等。visibility:hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。这个表示宽高都占了图片的百分百，可以把图片完整的展示到盒子上。雪碧图就是把图标集中到一张图里，方便浏览器快速读取、渲染。也可以通过color来改变背景图上文字的颜色。但预设值不太好，不一定可以把图片完整显示出来。要使用图标的时候，通过代码截取出来。背景图属于css的概念。
CSS实现一个盒子水平居中
最新发布
06-03
实现一个盒子水平居中的方法有多种，以下是其中两种常用的方法： 1. 使用 margin 属性 我们可以使用 margin 属性来实现一个盒子水平居中。具体方法是，给盒子设置一个宽度，然后将左右 margin 设置为 auto。这样就可以使盒子水平居中。 示例代码： ``` .box { width: 200px; margin: 0 auto; } ``` 2. 使用 flex 布局 另外一种常用的方法是使用 flex 布局。我们可以将盒子的父元素设置为 display: flex，并设置 align-items 和 justify-content 属性为 center，这样就可以使盒子水平居中。 示例代码： ``` .container { display: flex; align-items: center; justify-content: center; } .box { width: 200px; } ``` 以上两种方法都是常用的实现盒子水平居中的方法，可以根据实际情况选择使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值