z索引定位在另一个的div的顶部

Question

我有两个DIV容器，其结构如下：是

<div class="outer-div"> 
    <img src="images/point.png" class="img-a1"> 
    Lots of text goes here. 
</div> 
<div class="outer-div"> 
    <img src="images/point.png" class="img-b1"> 
    Some more text goes here 
</div> 

与此相关联的样式如下：

.outer-div { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 500px; 
} 
.img-a1 { 
    float:left; 
    z-index:-1; 
    position:relative; 
    margin-left: 250px; 
    margin-bottom: 400px; 
} 
.img-b1 { 
    float:right; 
    z-index:-1; 
    position:relative; 
    margin-left: 250px; 
    margin-bottom: 400px; 
} 

结果其中|||是来自div-a的文本并且...是来自div-b的文本：

.....||||| 
.....||||| 
.....||||| 
.....||||| 

但是，由于第二个div放置在第一个div的正上方，因此没有任何第二个div中的文本可以被选中，尽管可以看到它，因为只有空白空间，并且它上面有一个1x1像素的图像。

有没有办法让下部分的文本可以选择，而不使上部分区域不可选？

Answer 1

如果保留了结构，则无法从第一个div中选择文本，因为第二个文本位于其上。

但我认为你可以改变你的CSS有相同的结果，而不会重叠两个div。我提出了一些这样想：

HTML：

<div class="right-div"> 
    <img src="images/point.png" class="img-a1"> 
    Lots of text goes here. 
</div> 
<div class="left-div"> 
    <img src="images/point.png" class="img-b1"> 
    Some more text goes here 
</div> 

CSS：

.left-div { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 250px; 
} 

.right-div { 
    position: absolute; 
    top: 0px; 
    left: 250px; 
    width: 250px; 
} 

.img-a1 { 
    float:left; 
    z-index:-1; 
    position:relative; 
    background: red;  
} 
.img-b1 { 
    z-index:-1; 
    position:absolute; 
    margin-left: 500px; 
    background: blue; 
} 

渲染几乎是相同的例子，你可以在没有任何选择这两个文本问题。

您可能需要根据图像大小调整边距。