一般的开发者都知道ie6,7,8中如果两个div有层叠关系,上层的div背景透明,且没有内容,那么下层div在某些情况下就可以响应点击在上层的事件,也就是说,上层的div被穿透了.
一般来说,下层div可以响应点击的区域如下:
1,如果下层div有边框的话,边框可以响应点击
2,背景图和背景色都不能响应点击
3,内容可以响应点击,比如文本,图片等
另外:再有一种情况,如果外层div有click事件,点击上层div,这时有以下几种情况:
1,如果点击的下层div没有背景,这时候click事件不会响应
2,如果点击的下层div有背景,则上层div会响应click事件
3,如果点击在下层div的border上或者内容上,则上层div不响应click事件,下层div的click被触发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
*{
margin: 0px;
padding: 0px;
}
#Div0 {
top:0px ;
left: 0px;
width: 800px;
height:600px;
border: 3px solid red;
position : absolute;
z-index : 20;
}
#Div1 {
width: 500px;
height:300px;
border: 3px solid blue;
position : absolute;
top:0px ;
left: 0px;
z-index : 0;
background-color: yellow;
}
#Div4{
width: 200px;
height:300px;
background-color: green;
background-image: url(a.png)
}
</style>
</head>
<body>
一般的开发者都知道ie6,7,8中如果两个div有层叠关系,上层的div背景透明,且没有内容,那么下层div在某些情况下就可以响应点击在上层的事件,也就是说,上层的div被穿透了.
一般来说,下层div可以响应点击的区域如下:
1,如果下层div有边框的话,边框可以响应点击
2,背景图和背景色都不能响应点击
3,内容可以响应点击,比如文本,图片等
另外:再有一种情况,如果外层div有click事件,点击上层div,这时有以下几种情况:
1,如果点击的下层div没有背景,这时候click事件不会响应
2,如果点击的下层div有背景,则上层div会响应click事件
3,如果点击在下层div的border上或者内容上,则上层div不响应click事件,下层div的click被触发
<div id="Div1" onclick="alert(11)">
<!--<img src=mask.gif style="width:100%;height:100%;position:absolute" />-->
<div id="Div4"></div>
</div>
<div id="Div0" onclick="alert(22)"></div>
</body>
</html>
by: 天堂左我往右
分享到：
相关推荐
在互联网的早期，Internet Explorer 6 (简称IE6) 是一款广泛应用的浏览器，但它的兼容性和渲染机制存在诸多问题，其中一个问题就是“select穿透div”的现象。这个问题在现代浏览器中通常不会出现，但在IE6中，`...
### 交换两个div的位置 #### 知识点详解 在前端开发中，有时我们需要通过JavaScript来动态地调整页面元素的位置，比如实现两个`<div>`元素的位置互换。本篇文章将详细解析如何通过JavaScript实现这一功能，并深入...
在网页设计与开发中，如何让两个或多个`<div>`元素在同一行显示是一个常见的需求。这涉及到CSS（层叠样式表）的布局控制技术，是前端开发的基础技能之一。根据给定的文件信息，我们可以深入探讨这一主题，了解如何...
我们在制作网页时，有时需要多重div的重叠，每个div添加不同的内容，以实现特殊的层叠效果，这个如何实现，在网上没找到现成的详细的教程，但是可以用现有的知识，自己摸索哦。终于成功了，O(∩_∩)O~ 分享出来。...
在网页设计中，经常需要通过CSS来控制页面元素的布局和层次，其中一种常见的布局需求是让多个DIV元素按特定的顺序重叠在一起。这种效果可以通过CSS的绝对定位来实现，具体地，涉及到以下几个重要的知识点： 1. 绝对...
`div1.add(div2)`将两个div合并成一个jQuery对象，这样我们可以在同一个事件处理器中处理两个div。`animate({ backgroundColor: ... })`用于创建颜色变化的动画，参数是一个对象，包含要改变的CSS属性和值。`1000`...
2. 尺寸变化：当DIV的尺寸发生变化时，我们可以监听`resize`事件，但这个事件通常是为window对象设计的。对于DOM元素的尺寸变化，需要自定义逻辑或者利用MutationObserver。 3. 动画完成：如果使用jQuery的动画方法...
本文将深入探讨如何解决一个特定的IE浏览器问题：DIV元素在Internet Explorer（IE）下被下拉列表（select）穿透的问题。 标题提到的“解决DIV在IE下被下拉列表select穿透的问题(一)”是一个典型的老版IE浏览器渲染...
这个bug表现为在IE6下，当两个浮动（floated）的div相邻时，它们之间会出现一个3像素的间距，这与在其他浏览器（包括更新版本的IE）中的表现不符。这个问题的根源在于IE6对浮动元素的盒模型处理方式与其他浏览器不同...
但因为这两个事件会在鼠标进入或离开元素（包括其子元素）时触发，所以在`div1`和`div2`重叠的情况下，事件会被频繁触发，从而产生闪烁。 解决这个问题的一种尝试是使用`mouseenter`和`mouseleave`事件，它们仅在...
标题"解决DIV在IE下被下拉列表select穿透的问题(二)"所提及的，是一个典型的IE浏览器特有的问题。这个问题涉及到HTML中的`<div>`元素和`<select>`下拉列表之间的交互，具体表现为在Internet Explorer（特别是旧版本...
"DIV+CSS IE圆角"这个主题就是针对这个问题，探讨如何使IE浏览器也能支持圆角效果。 在CSS3中，`border-radius`属性是实现圆角的关键，它可以为元素的四个角落设置不同的圆角半径。例如： ```css .box { border-...
最后，当左右两个浮动元素相邻时，IE浏览器可能会出现3像素的文本偏移问题。这可以通过为左侧浮动元素添加负的`margin-right`来修正，例如`*html #left{ margin-right:-3px;}`。这里的星号`*`是针对IE的特定 hack。 ...
当一个列表（`<ul>`或`<ol>`)和一个`<div>`元素相邻时，如果列表的宽度加上边框和内边距超过了其容器的宽度，IE6可能会让列表项（`<li>`）溢出并遮挡后面的`<div>`。 解决这个问题有几种常见的方法： 1. **CSS ...
要实现这个效果，我们可以创建两个相关的div，一个初始为可见，另一个初始为隐藏。以下是一个简单的示例： ```html <div class="container"> <div class="show-on-hover">鼠标悬停我</div> <div class="hidden-...
2. **监听拖动事件**：我们需要监听拖动开始（`dragstart`）、拖动过程中（`drag`）和拖动结束（`dragend`）这三个事件。在JavaScript中，我们可以使用addEventListener方法来绑定这些事件： ```javascript const ...
6. **避免重叠**：设计时尽量避免Select和Div重叠的情况，通过调整布局或使用其他交互方式来规避这个问题。 总的来说，解决IE6下的Select覆盖Div问题需要根据实际情况灵活运用上述方法。在现代浏览器广泛使用的今天...
在描述中提到的“可以在同一页使用多个移动块”，意味着可以创建多个具有滚动效果的Div，每个Div都可以独立设置其滚动速度、方向以及动画效果。通过类（Class）的设计模式，我们可以将这些效果封装在独立的函数或...