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回答了你的问题：

null

但是我对你的HTML感到担心，因为这感觉就像是黑客。另外，在创建HTML时请记住可访问性。

Answer 2

完全从CSS中删除innerPanel类。

您不需要定位synchronized，因为默认情况下，它位于容器的左上角。您只需要定位.row { position: relative; } .alt-text { position: absolute; top: 0; background-color: #fff; }类：

Updated codepen

.autocomplete({
   ...
   .change: function( event, ui ) {
      var input = $("input[title='AirportCode Required Field']");
      var selectedValue = input.val();
      var valid = false;
      $.each(data , function (i, item) {
         if (item.value === selectedValue) valid = true;
      });

      if (valid == false){
        // clear the input if not found
        input.val('');
      }
   }
})

如何将这些div与以下位置隔离：绝对＆＃39;进入不同的群体？

2 个答案: