I have two div containers which are structured as follows:

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

The styles associated with this are as follows:

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

The result of this is to produce something like the following, where ... is the text from div-a and ||| is the text from div-b:

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

However, since the second div is placed immediately above the first div, none of the text in the second div can be selected, although it can be seen since there is just empty space, and a 1x1 px image above it.

Is there a way to get the text from the lower div to be selectable, without making the upper div unselectable?