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出现在“sticky”范围内的其余信息之后。因此，如果stickies.data真的很长，它会被推倒。

相反，所需的行为是让time_data div与“sticky”类中的其余信息重叠。这样他们就彼此独立了。我不希望time_data只在“粘性”类的其余部分之后启动。这就是我使用position：absolute的原因。我在http://jsbin.com/fecego/1/edit之后对其进行了建模。怎么能在我的代码中的jsbin中做什么，以便它也重叠？

Answer 1

很难说出你要问的是什么，但是如果你希望你的div与li的内容重叠，那么li必须是{{1} }或绝对值position:relative必须在div内（你的jsbin示例没有这样做）。类似的东西：

li

CSS

<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>

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

如何重叠ng-repeat列表中的元素 - position：absolute？

1 个答案: