css 方法使列表元素 出现在列表顶部的特定类

Question

有没有什么css方法可以冒泡<li>在列表顶部有一些类的元素。我想我过去曾遇到过一些方法来执行此操作，但不记得如何执行此操作。

请注意我不需要重新排列标记。只需让具有特定类的元素出现就好像在没有该类的其他元素之上。

谁能告诉我是否有办法做到这一点？

Answer 1

使用纯 CSS，您可以使用绝对定位将元素移动到列表的顶部，尽管就标记而言它实际上不会位于列表的顶部。然而，你想做的事情可以用 javascript 来实现。使用 jQuery，您可能希望按照以下方式做一些事情:

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);
});

工作示例:http://jsfiddle.net/tMWJs/

编辑:

要使用纯 CSS 做到这一点，请使用绝对定位。这是您需要的 CSS 示例:

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

如果您有多个元素要移动，这种方法需要修改以分别定位每个元素，并且可能不适合。

工作示例:http://jsfiddle.net/sp73f/