如何在 ng-repeat 列表中重叠元素 - 位置：绝对？答案

【问题标题】：How to overlap elements inside of a ng-repeat list - position: absolute?如何在 ng-repeat 列表中重叠元素 - 位置：绝对？
【发布时间】：2014-10-27 06:52:59
【问题描述】：

这是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 仅在“粘性”类的其余部分之后开始。这就是我使用位置：绝对的原因。我在http://jsbin.com/fecego/1/edit 之后对其进行建模，效果很好。如何在我的代码中执行该 jsbin 中的内容以使其也重叠？

【问题讨论】：

必须有比您发布的内容更多的 CSS。如果您还提供了指向（不工作的）角度版本的链接，那会容易得多。您不应该在ng-repeat 中拥有带有 ID 的东西，每页只有一个 ID。在您的示例中，meta div 在ul 之外，但在角度版本中，它在li 内部，因此您的示例并没有说明问题
同样要使某些东西位于父元素内部，你必须给你的父元素position: relative，见stackoverflow.com/questions/13867717/…见jsbin.com/fitewewilibe/1/edit

标签： html css angularjs

【解决方案1】：

很难说出你在问什么，但如果你想让你的 div 与 li 的内容重叠，li 必须是 position:relative 或绝对值，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

【讨论】：