Anthony Kong February 2016

How to segregate these divs with 'position:absolute' into different groups?

Here is my html:

<div class='row'>
    <div class='text text-1'>1</div>
    <div class='alt-text alt-text-1'>A1</div>
</div>
<div class='row'>
    <div class='text text-2'>2</div>
    <div class='alt-text alt-text-2'>A2</div>
</div>
<div class='row'>
    <div class='text text-3'>3</div>
    <div class='alt-text alt-text-3'>A3</div>
</div>

In each row the text divs should be covered by alt-text divs. Here is an example of what I want to achieve visually:

A1
A2
A3

Here is my css:

.row {
    /*position: absolute;*/
    overflow-x: hidden;
}

.text {
    position: absolute;
    z-index: 1;
}

.alt-text {
    position: absolute;
    z-index: 100;
    background-color: #fff;
}

However this does not work correctly. All the divs lump together. All I see is

A3

(code: http://codepen.io/kongakong/pen/zrMzbe)

How can I keep each pair of text and alt-text in their row?

Answers


joshhunt February 2016

I think this css answers your question:

.row {
    position: relative;
}

.alt-text {
    position: absolute;
    top: 0;
    background-color: #fff;
}

I am however concerned about your html as this feels like a hack. Also please keep accessibility in mind when creating your html.


Scott February 2016

Remove the .text class entirely from the CSS.

You don't need to posiiton .text because, by default, it at the top left of the container. You just need to position the .alt-text class:

Updated codepen

.row {
    position: relative;
}
.alt-text {
    position: absolute;
    top: 0;
    background-color: #fff;
}

Post Status

Asked in February 2016
Viewed 3,970 times
Voted 5
Answered 2 times

Search




Leave an answer