html - 如何重叠 ng-repeat 列表中的元素 - 位置 : absolute?

Question

这是html:

<div class = "container">
   <form ng-submit = "createSticky()">
      <input ng-model="formData.data" type="textarea" name="sticky_content" placeholder="add sticky text" required="true"/>
      <input ng-model="formData.end" type="text" name="time_end" placeholder="expiration time (sec)" required="true"/>
      <button type="submit" name="add_sticky" value="add a new stickie!">new sticky</button>
   </form>
   <div id = "stickies_list" class="row">
      <ul id = "stickies">
         <span class="sticky">
            <li ng-repeat="stickie in stickies" ng-click="match(stickie)">
               <button id="delete_checkbox" ng-click="deleteSticky(stickie.id)">X</button>
               <h3>{{stickie.data}}</h3>
               <div id="time_data">
               start: <h10><mydate>{{stickie.start | date:'MM/dd/yyyy @ h:mma'}}</mydate></h10><br>
               stop: <h10><mydate>{{stickie.end | date:'MM/dd/yyyy @ h:mma'}}</mydate></h10> 
               </div>
            </li>
         </span>
      </ul>
   </div>
</div>

这是CSS:

sticky #time_data {
  postion:absolute;
  top:0;
  left:0;
}

现在 time_data div 出现在“粘性”范围内的其余信息之后。所以如果 stickies.data 真的很长，它就会被压低。

相反，所需的行为是让 time_data div 与“粘性”类中的其余信息重叠。使它们相互独立。我不希望 time_data 仅在“粘性”类的其余部分之后才开始。这就是我使用 position:absolute 的原因。我在 http://jsbin.com/fecego/1/edit 之后建模效果很好。如何在我的代码中执行那个 jsbin 中的操作，以便它也重叠？

Answer 1

很难说出你在问什么，但如果你想让你的 div 与 li 的内容重叠，li 必须在 position :relative 或 absolute 并且 div 必须在您的 li 内(您的 jsbin 示例没有这样做)。像这样的东西:

<span class="sticky">
  <ul>
    <li> list 
      <div class="meta"><p> I should be overlapping with the list, and I am!</p></div>
    </li>
    <li> is 
      <div class="meta"><p> I should be overlapping with the list, and I am!</p></div>
    </li>
    <li> very 
      <div class="meta"><p> I should be overlapping with the list, and I am!</p></div>
    </li>
    <li> long 
      <div class="meta"><p> I should be overlapping with the list, and I am!</p></div>
    </li>
  </ul>
</span>

CSS

.sticky .meta { 
    position:absolute;
    top:0;
    left:0;
}

.sticky li {
  position: relative
}

参见 How to make div's percentage width relative to parent div and not viewport