css3 - css way to make appear list elements <li/> with certain class on top of list -

is there css way bubble <li> elements class on top of list. guess have come across way in past cant remember how exactly.

please note dont need rearrange in markup. make elements class appear if on top of other elements without class.

can tell if there way this?

with pure css, can move element top of list using absolute positioning, though not @ top of list far markup concerned. want can achieved javascript however. using jquery, want along these lines:

html:

<ul id="mylist">     <li>second</li>     <li>third</li>     <li>fourth</li>     <li class="top">first</li>     <li>fifth</li> </ul> 

javascript:

$(document).ready(function () {     var list = $('#mylist');     list.children('li.top').remove().prependto(list); }); 

working example: http://jsfiddle.net/tmwjs/

edit:

to pure css, use absolute positioning. here example of css need:

ul#mylist {position:relative; margin-top:40px;} ul#mylist li {line-height:20px;} li.top {position:absolute; top:-20px;} 

if have multiple elements move, approach need tinkering position each element seperately, , not suitable.

working example: http://jsfiddle.net/sp73f/