如何将'position：absolute'这些div分隔成不同的组？

Question

这里是我的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> 

在每行，text的div应该由alt-text的div覆盖。这里是什么，我想实现视觉上的例子：

A1 
A2 
A3 

这里是我的CSS：

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

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

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

然而，这并不正常工作。所有的div都聚集在一起。我看到的是

A3 

（代码：http://codepen.io/kongakong/pen/zrMzbe）

我怎样才能保持每对text和alt-text在其列？

Answer 1

我觉得这个CSS回答你的问题：

.row { 
    position: relative; 
} 

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

不过，我关心你的HTML，因为这感觉就像一个黑客攻击。创建您的html时请记住可访问性。

Answer 2

完全从CSS中删除.text类。

您不需要定位.text，因为默认情况下它位于容器的左上角。你只需要定位.alt-text类：

Updated codepen

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