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

這是HTML：如何重疊ng-repeat列表中的元素 - position：absolute？

<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與「sticky」類中的其餘信息重疊。使他們彼此獨立。我不希望time_data只在「粘性」類的其餘部分之後纔開始。這就是爲什麼我使用position：absolute。我在http://jsbin.com/fecego/1/edit之後建模完美。在我的代碼中，如何在jsbin中做什麼以使它重疊？

來源

2014-09-02 BigBoy1337

我們有了比你發佈什麼更多的CSS。如果你還提供了一個鏈接到（不工作的）角度版本，它會容易得多。你不應該在'ng-repeat'內有一個ID，每頁只有一個ID。在你的例子中，'meta' div在'ul'之外，但是在角度版本里它在'li'裏面，所以你的例子沒有多說關於這個問題 – 2014-09-02 22:07:24

也爲了讓一些東西放在父元素的內部，你必須給你的父母'position：relative'，參見http://stackoverflow.com/questions/13867717/how-to-make-divs-percentage-width-relative-to-parent-div-and-not-viewport/13867800＃13867800請參閱http://jsbin.com/fitewewilibe/1/edit – 2014-09-02 22:11:16

很難告訴你在問什麼，但如果你希望你的div與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

來源

2014-09-02 22:22:23

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

回答

相關問題