Question

我知道这种类型的问题已被多次提出过，但经过几个小时或研究/代码摆弄/挫折，我仍然没有遇到过解决方案。

上下文

我的网页使用PHP回应来自sql表的数据并保持一致的布局我使用div类，当单击其中一个div时，它会更改会话变量。需要相对定位，因为结果的数量不会保持不变，并且使用while循环加载结果，因此每个div都放在前一个div之下。要完成此会话变量更改，我发现以下方法使用链接 - 不适合网络爬虫，或使用透明提交按钮。透明的提交按钮将位于每个div的顶部，因此用户无法看到它，但是当单击它时，它会将数据发布到PHP处理页面。问题是Z-index对相对定位不起作用。

我的代码

我创建了一个简单版本的代码，以显示div不会叠加在一起。

<style>
.example1{
position: absolutex;    
width: 400px; 
height: 500px;    
background:green;
font-size: 1.5em; 
z-index: 2;     
}
.example2{
position: relative;    
width: 400px; 
height: 500px;    
background:red;
font-size: 1.5em;  
z-index: 9999; 
}
</style>
<html>
<div class="example1"><p>Example 1</p></div> 
<div class="example2"><p>Example 2</p></div>     
<div class="example1"><p>Example 1</p></div> 
<div class="example2"><p>Example 2</p></div>   
<div class="example1"><p>Example 1</p></div> 
<div class="example2"><p>Example 2</p></div>       
</html>

示例1（绿色）将是可见的SQL输出，即用户名，示例2（红色）将是透明按钮，我想完全在示例1之上，并且由于完全不透明而不可见。问题是示例2没有堆叠在示例1的顶部，即使它具有更高的Z索引。

Answer 1

你可能会因为你的元素嵌套在其他元素中而被绊倒了。子元素的堆叠上下文在父元素中解析。

如果不查看原始代码，很难说，但堆叠顺序可能类似于：

parent div - #1
  child p ---- #3
parent div - #2
  child p ---- #4

规范中的一个解决方法是使用小于1的不透明度值将堆叠上下文更改为：

parent div - #1 (opacity: .99;)
  child p ---- #1.1
parent div - #2
  child p ---- #3

以下是两个资源，可以提供更详细的解释：

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/#wrapping-up https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

Answer 2

如果要将div标签叠加在另一个上，则需要使用绝对位置（而不是相对位置）。

尝试以下代码：

你会看到重叠的div，第二个在顶部，因为它有更高的z-index。

<style>
.example1{
position:absolute;    
width: 400px; 
min-height: 500px;    
max-height: 500px;
font-size: 1.5em; 
z-index: 2;    
}
.example2{
position: absolute;    
width: 400px; 
min-height: 500px;    
max-height: 500px;
font-size: 1.5em;  
z-index: 3;    
}

</style>
<html>
<div class="example1"><p>Example 1</p></div> 
<div class="example2"><p>Example 2</p></div>     
</html>

Answer 3

嗨，这是一个可能的解决方案，为div添加保证金。

http://codepen.io/dfrierson2/pen/RNoWZe

.example1{
position: relative;    
width: 400px; 
height: 500px;    
background:green;
font-size: 1.5em; 
z-index: 2;    
}
.example2{
position: relative;    
width: 400px; 
height: 500px;    
background:red;
font-size: 1.5em;  
z-index: 9999; 
margin: -155px 0 0 100px;
}

<html>
<div class="example1"><p>Example 1</p></div> 
<div class="example2"><p>Example 2</p></div>     
</html>

堆叠相对位置div类

3 个答案: