Question

I have a series of square <li> elements inside a fixed width ul. As they reach the edge of the <ul>, they drop onto a new row, so there are 3 rows of <li>s (imagine a brick wall made up of <li> elements).

I need to pin all of these to the top edge of the <ul>, so there’s only one row, with all of them layered on top. The problem is that if I use position: absolute; top:0;, the horizontal position is lost.

Is there any way of doing this with javascript so that the horizontal position is retained, but they are pinned to the top of the <ul>? It doesn’t matter that they’ll all overlap and stack on top of each other

Answer 1

You have to let them layout naturally and then change their style to position:absolute, top:0 and left:(insert the value of each element's offsetLeft).

edit: example

var container = document.getElementById('hover-days');
var elements = container.getElementsByTagName('li');
var lefts = [];

// first read the values
for(var i = 0; i < elements.length; ++i) {
    lefts[i] = elements[i].offsetLeft;
}

// then set them
for(var i = 0; i < elements.length; ++i) {
    var el = elements[i];
    el.style.left = lefts[i] + 'px';
    el.style.top = '0px';
    el.style.position = 'absolute';
}