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; 
} 

渲染幾乎是相同的例子，你可以在沒有任何選擇這兩個文本問題。

您可能需要根據圖像大小調整邊距。