html - 位于另一个 div 之上的 DIV 的 z-index

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-a 的文本乙:

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

但是，由于第二个 div 位于第一个 div 的正上方，因此无法选择第二个 div 中的任何文本，尽管可以看到它，因为只有空白区域和其上方的 1x1 像素图像。

有没有办法让下部 div 的文本可选择，而不使上部 div 不可选择？

Answer 1

如果您保留结构，则无法从第一个 div 中选择文本，因为第二个 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;
}

渲染与您的示例几乎相同，您可以毫无问题地选择这两个文本。

您可能必须根据图像的大小调整边距。