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像素图像。 / p>

有没有办法让低级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;
}

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

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

DIV的z-index位于另一个div的顶部

1 个答案: