开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当两个div重叠时删除类

，可以通过以下步骤实现：

确定两个div的重叠条件：可以使用CSS的position属性来控制div的定位方式，例如设置为absolute或relative，并通过top、bottom、left、right属性来调整div的位置。当两个div的定位方式相同且位置重叠时，可以认为它们重叠。
使用JavaScript或jQuery来检测两个div是否重叠：可以通过获取两个div的位置信息（例如使用offset()方法）来判断它们是否重叠。如果两个div的位置信息有重叠部分，则它们重叠。
删除重叠div的类：一旦确定两个div重叠，可以使用JavaScript或jQuery来删除其中一个div的类。可以使用removeClass()方法来移除指定div的类，或者直接修改div的className属性。

以下是一个示例代码，用于检测两个div是否重叠并删除其中一个div的类：

<!DOCTYPE html>
<html>
<head>
  <style>
    .div1 {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 100px;
      left: 100px;
    }
    
    .div2 {
      width: 100px;
      height: 100px;
      background-color: blue;
      position: absolute;
      top: 150px;
      left: 150px;
    }
  </style>
</head>
<body>
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>

  <script>
    var div1 = document.querySelector('.div1');
    var div2 = document.querySelector('.div2');

    function checkOverlap() {
      var rect1 = div1.getBoundingClientRect();
      var rect2 = div2.getBoundingClientRect();

      if (rect1.top < rect2.bottom && rect1.bottom > rect2.top && rect1.left < rect2.right && rect1.right > rect2.left) {
        div1.classList.remove('div1');
      }
    }

    checkOverlap();
  </script>
</body>
</html>

在上述示例中，我们定义了两个div（div1和div2），并设置它们的位置和样式。通过JavaScript的getBoundingClientRect()方法获取div的位置信息，并使用条件判断来检测两个div是否重叠。如果重叠，则使用classList.remove()方法来删除div1的类。

请注意，上述示例仅为演示目的，实际应用中可能需要根据具体情况进行适当的修改和调整。

相关搜索:当两个div重叠时-第一个div的颜色应该改变打印时Div重叠当bootstrap div折叠时，向div添加类当窗口大小改变时，如何防止div重叠？当滚动到特定div类时更改div颜色当div为空时CSS更改类当子div具有特定的类名时，隐藏div的类如何停止重叠两个div？仅当父级宽度不足时才允许水平重叠div 当有多个div时，用于添加/删除特定类的Jquery单击事件在div上单击时删除添加类到达div (锚点)时删除css类缩放时div与其他div重叠的问题当两个div匹配时触发视频播放当div触及浏览器顶部时添加类当div在视口中时添加类(水平滚动)缩放时重叠Div (html、css动画)悬停时，段落重叠在div之外单击链接时在div中添加/删除类当listview向上滚动时图像重叠？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS 之选择器

选择器类型选择器也叫做元素选择器和简单选择器，可以根据元素标签指定样式。 p { color:red; } 类选择器一般用于某些同类型的样式。 .xxxClass{ }

ID选择器为特殊的元素，指定类型 #xxxId{ }

后代选择器在某个选择器后，选择指定规则的后代，为其指定样式 div p { } 伪类选择器为某些特殊的元素，在某些条件时，指定样式。比如，链接的link和visi

09

复盘1

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

02

CSS权重计算

在没有引入权重的概念时，我们对css的优先级认识是这样的 !important>行内样式>ID>类/伪类|属性>标签排在最前面的优先级越高。但css是有权重机制的，css的优先级都是根据权重推算出来如下表格用四位数字来表示，分别表示四个级别，从左到右不断递减（排在前面的越大）

00

前端面试实录CSS篇（最近一周）

imgfixed：元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。

01

关于css margin，你需要知道的一切

当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子内容中推开。

04

【CSS】309- 复习 CSS盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 CSS盒模型：标准模型 + IE模型

03

关于 CSS margin，一些让你模糊的点

当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子内容中推开。

02

知识整理之CSS篇

CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣，可移步至：知识整理之HTML篇

02

【面试题解】什么是外边距重叠？如何解决？什么是BFC？

本系列面试题旨在学会相关知识点，从而轻松应对面试题的各种形式，本文讲解了 BFC 以及利用 BFC 解决外边距重叠问题。

02

前端Tips#3 - 简写的 border-radius 100% 和 50% 是等效的

border-radius 这个 css 属性大家应该使用得非常娴熟，现实中用到的场景基本都是四个圆角一致的情况。

02

【CSS3】CSS3 伪元素选择器 ( 伪元素选择器语法简介 | 伪元素选择器权重计算 | 代码示例 )

属性选择器 , 伪类选择器的权重 , 与类选择器权重相同 , 都是 10 ;

02

BFC背后的神奇原理

在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。

01

小结BFC的基本知识与应用

在写css样式时，可能是添加了一个样式后就达到了预期效果。有没有想过，是我们在不经意间触发了什么，帮助我们达到了效果？本文就快速介绍下css样式中经常使用的BFC，主要包括以下几个方面：

脱离文档流分析（转）

block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；

02

【基础巩固】- 带你搞懂CSS盒模型

其实我们大家都能经常看见它，尤其是我们前端的小伙伴们，在浏览器中打开f12就能看见这样一个动态变化的图。

02

前端Tips3 - border-radius 原来可以这么玩

border-radius 这个 css 属性大家应该使用得非常娴熟，现实中用到的场景基本都是四个圆角一致的情况。

04

块格式化上下文（BFC）布局规则及常见情景

Box是CSS布局的对象和基本单位，直观点来说，就是一个页面是由很多个Box组成的。元素的类型和display属性，决定了这个Box的类型。不同类型的Box，会参与不同的Formatting context(一个决定如何渲染文档的容器)，因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：

04

十分钟狠狠地拿下CSS中的BFC

MDN文档里的原话确实不怎么像人话，能看懂就奇了怪了。简而言之,BFC就是一个独立的布局环境，可以认为是一个容器，在这个容器里面你随便放都不会影响到容器外的布局。而且一旦触发了BFC，那容器内部怎么布局也不受外面影响。

01

前端面试比较好的回答

DNS占用53号端口，同时使用TCP和UDP协议。（1）在区域传输的时候使用TCP协议

03

CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins

前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　盒子模型作为CSS基础中的基础，曾一度以为掌握了IE和W3C标准下的块级盒子模型即可，但近日在学习行级盒子模型时发现原来当初是

07

2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)

=============================================================

02

什么是BFC？看这一篇就够了

在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。

02

小小结( 二 )

1.1 js同步执行与异步执行 js的执行机制：js是单线程环境，从上到下、依次执行，即同步执行；在这段代码中，for循环是同步代码，setTimeout是异步代码。 js在执行代码的过程中，碰到同步代码会依次执行，碰到异步代码就会将其放入任务队列中进行等待，当同步代码执行完毕后再开始执行异步代码，即异步执行。

02

如何用JS实现网页上通过鼠标移动批量选择元素？

监测外部容器的mousedown、mousemove、mouseup事件来进行选择判断，大致dom结构如下：

06

Android开发人员一次搞懂前端BFC原理

BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。

02

详解清除浮动的多种方式（clearfix）

版权声明：本文为博主原创文章，欢迎转载，转载请注明出处。 https://blog.csdn.net/FE_dev/article/details/68954481

06

CSS布局(二) 盒子模型属性

盒子模型的属性宽高width/height 　　在CSS中，可以对任何块级元素设置显式高度。　　如果指定高度大于显示内容所需高度，多余的高度会产生一个视觉效果，就好像有额外的内边距一样；　　如果指定高度小于显示内容所需高度，取决于overflow属性，需要滚动条需要设置为overflow:auto。 auto 　　宽高和margin可以设置auto。对于块级元素来说，宽度设置为auto，则会尽可能的宽。详细来说，元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距；　　高度设置为a

07

前端入门4-CSS属性样式表声明正文-CSS属性样式表

作为一个前端小白，入门跟着这四个来源学习，感谢作者的分享，在其基础上，通过自己的理解，梳理出的知识点，或许有遗漏，或许有些理解是错误的，如有发现，欢迎指点下。

03

一个简单完整的网页密码_简单的个人网页

https://github.com/suviwang312/SimpleFullPage

04

CSS3 transform变换、翻转图片示例

1、translate(x,y) 设置盒子位移 2、scale(x,y) 设置盒子缩放 3、rotate(deg) 设置盒子旋转 4、skew(x-angle,y-angle) 设置盒子斜切 5、perspective 设置透视距离 6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示 7、translateX、translateY、translateZ 设置三维移动 8、rotateX、rotateY、rotateZ 设置三维旋转 9、scaleX、scaleY、scaleZ 设置三维缩放 10、tranform-origin 设置变形的中心点 11、backface-visibility 设置盒子背面是否可见

01

【说站】css边距重叠是什么

css边距重叠是什么 1、边界重叠是指两个或两个以上盒子的相邻边界重合在一起，构成单一边界。可以相邻也可以嵌套，其中没有非空内容、补白、边框。 .neighbor{ height: 100px; background: red; } .father{ background: #f436365e; } .child{ height: 100px; margin-top: 10px; background: #00800047; }

this is neighbor </div

02

CSS 实现“故障”特效

这些效果要是综合运用到业务中应该很吸引眼球。今日早读文章由腾讯@chokcoco投稿分享。

01

连BFC都不知道谈什么前端工程师

简单的说它就是一块封闭的区域，里面的盒子在怎么动也不会影响外面的布局。创建BFC也有条件只有display属性为 block,list-item,table的元素才能创建BFC BFC有宽度，高度。有外边距margin,有内边距外边框

01

刚学会 TypeScript，顺手做个贪吃蛇小游戏

最近在学习中，再次遇到了贪吃蛇的案例，之前刚学 JavaScript 的时候就有遇到过，趁着这段时间有一点点时间，就跟着做了一下，这篇文章将手把手带你实现一个贪吃蛇的小游戏，难度不会很大，嘻嘻

04

刚学会 TypeScript，顺手做个贪吃蛇小游戏

最近在学习中，再次遇到了贪吃蛇的案例，之前刚学 JavaScript 的时候就有遇到过，趁着这段时间有一点点时间，就跟着做了一下，这篇文章将手把手带你实现一个贪吃蛇的小游戏，难度不会很大，嘻嘻

01

浅析CSS里的 BFC 和 IFC

前言 ---- 之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。一、什么是 BFC ---- 和之前所有博文一样，还是先从What的角度开始介绍，由浅入深的理解BFC。所谓的 Formatting context(格式化上下文), 它是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则. 它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。而 Block Formatting Cont

前端面试题归类-css

网页看着不方便，想要文档可以私聊我。要是有错别字和错误的地方，请各位大佬直接指出，谢谢啦！！

04

由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

写这篇文章的起因是源于这篇文章：谈谈面试与面试题中关于position的讨论，文中一开始就说的这句话：面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、margin collapse，base line，writing mode，bidi，这样一路问下去的，奈何第一个问题（亲我真的只问了position有哪些取值和行为啊）就悲剧了…… 说到position，那么稍微对c

05

理解CSS布局和块格式化上下文

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

03

清除过的浮动

http://www.iyunlu.com/view/css-xhtml/55.html

02

BFC（块级格式化上下文）与常见布局方案

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式化上下文）。

03

backface-visibility在翻转特效的妙用

这应该是第6篇关于我开发个人博客的文章了。这次主要谈一谈我在做开源项目展示遇到的问题。个人博客除了博文，我觉得开源项目也应该被展示出来。类似github，这样的界面。

01

空间数据的拓扑处理

拓扑主要用于确保空间关系并帮助其进行数据处理，在很多情况下拓扑也用于分析空间关系，概括下来就两点，一是分析有无错误，二是利用拓扑进行编辑。

02

css面试点二：BFC（块级格式化上下文）+常见布局方案

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

02

【愚公系列】2023年03月其他-Web前端基础面试题（CSS_42道）

CSS 是层叠样式表（Cascading Style Sheets）的简写，它是一种用于定义网页和网页应用程序外观的标准格式语言。

02

『知识巩固#1』Html、Css基础整理

Html 标签学习排版标签标题 h1、h2、h3、h4、h5、h6只有这六个段落标签 p标签段落之间有空隙换行换行标签 br 空换行 hr 下划线换行文本格式化标签根据语境区分 b、strong 加粗 u、ins 下划线 i、em 倾斜 s、del 删除线媒体标签图片标签img 属性名、属性值 alt属性值作为替换文本、src属性作为图片链接、title属性在鼠标悬停时显示 width、height 很容易理解，控制图片宽高路径相对路径绝对

02

CSS理解之margin

1.margin与百分比单位 Paste_Image.png Paste_Image.png 2.margin重叠 margin重叠通常特性：只发生在block水平元素（例如：p、div、list、

02

CSS 定位详解

CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。

04

tcR包：T细胞受体和免疫球蛋白数据进行高级分析和可视化（二）

免疫球蛋白(IG)和T细胞受体(TR)在适应性免疫应答过程中起着关键的抗原识别作用。上一次我们介绍到tcR包：T细胞受体和免疫球蛋白数据进行高级分析和可视化（一）。今天小编继续为大家介绍分析T细胞受体库的R包：tcR包，可以对TR序列进行多样性评估、共享T细胞受体序列识别、基因usage统计计算等。

03

CSS基础（一）

CSS引入方式： 1. 行内式：

（使用最少，因为会产生冗余，而且不符合W3C规定） 2. 内嵌式： <style> ... （写的是样式）... </style>（不会有冗余） 3. 外链式：<link href = "style.css"> （用的最多）

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭