Here is the HTML code:
<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>
and here is the CSS code:
.sticky #time_data {
postion:absolute;
top:0;
left:0;
}
The current issue is that the time_data div appears after the rest of the info in the "sticky" span, causing it to be pushed down if the stickies.data is lengthy. The desired behavior is for the time_data div to overlap with the other information in the "sticky" class, being independent of it. This is achieved by using position:absolute. Following an example at http://jsbin.com/fecego/1/edit, where this works perfectly. How can I implement similar behavior in my code so that the time_data div also overlaps as intended?