自己可以测试下，然后分析下自己的东西为什么，和这边关系对照下！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<style type="text/css">
#left {
width: 200px;
height:400px;
float: left;
background:#999;
margin-right:10px;
}
#right {
background: blue;
width: 400px;
height: 400px;
float: left;
}
#box1 {
position: relative;
}
#box2 {
background: orange;
width: 300px;
height: 300px;
}
.myli {
position: relative;
}
#mybox {
z-index: 9999;
position: absolute;
width: 200px;
height: 200px;
margin-left: 30px;
background: red;
}
</style>
</head>
<body>
<div id="left">
<ul>
<li class="myli">列表</li><span id="mybox"></span>
</ul>
</div>
<div id="right">
<div id="box1">
<div id="box2">
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
此类用于固定表头中的列，同样使用`position: relative;`，并通过`left: expression(this.parentElement.offsetParent.scrollLeft);`动态调整左部位置，确保列的位置固定。 ```css .FixedTitleColumn { position: ...
### 最顶层div被flash或者下拉列表遮挡的问题解决 在网页设计中，有时会出现顶层的div元素被其他元素如Flash或下拉列表遮挡的情况。这种遮挡问题通常是由于CSS定位属性设置不当造成的，尤其是`z-index`值的设置不...
8. **视频封面遮挡问题**：部分安卓低版本设备中，使用 `video` 元素时，设置的封面图可能遮挡 fixed 元素。 9. **QQ、UC 浏览器 footer 定位问题**：滚动页面时，footer 可能会上移，这是由于地址栏收起导致的。 #...
标题“ie6下select遮挡div”指出的是一个典型的IE6特有的问题：当在网页上使用select下拉框时，它会覆盖在其他使用绝对或相对定位的元素（如div）之上，导致这些元素无法正常显示。这个问题对于设计美观且交互性强的...
3. **使用`position: relative;`**：将浮动元素的`position`属性设置为`relative`，而不是`static`（默认值）。这样，即使元素仍然浮动，IE也可能更好地处理与绝对定位元素的关系。 4. **避免浮动**：如果可能，...
标题中的“IE又一个让人吐血的BUG: 关于 table的position 和 select”指的是在Internet Explorer浏览器中，当处理表格（table）元素的定位（position）属性与下拉选择框（select）元素交互时出现的一个常见问题。...
然而，这种相对定位在IE7中可能会引起浮层的遮挡异常，尤其是当浮层元素和被遮挡元素都具有`position: relative`属性时，IE7可能无法正确处理它们之间的层级关系。 解决IE7浮层遮挡问题的关键在于调整元素的堆叠...
对于特定情况，例如`Flash`元素和IE6下的`select`元素，可能需要特殊的处理，如更改`wmode`属性或使用`iframe`来解决窗口元素的遮挡问题。 总结来说，理解`position`定位和`z-index`的关系是解决元素重叠问题的关键...
如果需要更精确地控制元素的位置，可以使用`position: absolute`或`position: fixed`。这样可以将元素从文档流中移出，并相对于最近的非静态定位祖先元素进行定位。 4. **调整`<Object>`的`wmode`属性**： 对于...
在CSS布局中，元素的位置和重叠是一个关键概念，尤其涉及到`position`定位和`z-index`属性时，这些问题往往会让开发者感到困扰。本文将深入探讨元素重叠的背景知识，以及`position`定位下的`z-index`顺序。 首先，...
在前端开发中，Z-INDEX属性是用于控制页面上元素的堆叠顺序，尤其是在使用绝对定位（absolute）、相对定位（relative）或固定定位（fixed）时。然而，开发者经常遇到在Internet Explorer（IE）浏览器中设置z-index...
- **CSS定位**: 使用`position: fixed;`或`position: absolute;`属性来确定元素相对于浏览器窗口的位置。 - **JavaScript/jQuery**: 通过监听滚动事件或特定操作来动态调整元素的位置。 - **HTML5 API**: 如`window....
a) **检查CSS布局**：确保video-player的父级容器具有合适的定位属性（如position: relative;），并调整z-index值，使其高于可能与其重叠的其他元素。例如，可以设置`z-index: 999;`以确保video-player位于最上层。...
需要注意的是，z-index属性只有在元素的position属性被设置为relative、absolute或fixed时才有效。因此，确保给父容器设置相对定位，然后为该父容器添加z-index属性，是解决绝对定位元素被遮挡问题的关键步骤。 ...
1. **兼容性问题**：在使用绝对定位时需要注意浏览器的兼容性问题，特别是旧版IE浏览器可能无法正确渲染。 2. **布局调整**：当页面布局发生变化时，可能需要重新调整文字的位置。 3. **响应式设计**：在不同设备上...
在网页开发过程中，尤其是针对老版本的Internet Explorer（如IE6和IE7）时，开发者可能会遇到一个棘手的问题：绝对定位元素在这些浏览器中神秘消失或者被其他元素遮挡。这个问题主要涉及到浏览器的渲染差异，特别是...
position:relative 会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化。使得使用了position：absolute 元素相对于画布位置进行定位； absolute元素脱离了文档结构，产生破坏性，导致父元素坍塌，...
position: relative; } select::after { content: '\25BC'; /* Unicode字符，代表向下箭头 */ position: absolute; top: 50%; right: 10px; transform: translateY(-50%); pointer-events: none; /* 防止...
position: relative; z-index: 1; } ``` 此外，我们还需要处理文字和链接的样式。例如： ```css .navbar a { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-...