这是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与“ sticky”类中的其余信息重叠。使它们彼此独立。我不希望time_data仅在“粘性”类的其余部分之后开始。这就是为什么我使用position：absolute。我在http://jsbin.com/fecego/1/edit之后对此进行了建模，该模型运行良好。如何在我的代码中的该jsbin中做些什么，使其也重叠呢？
很难说出您要问的是什么，但是如果您想让自己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
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句