css - 使列表元素出现的css方式
在列表顶部有某个类

Question

是否有任何 css 方法可以<li>在列表顶部使用某些类来冒泡元素。我想我过去曾遇到过一些方法来做到这一点，但不记得如何准确地做到这一点。

请注意，我不需要在标记中重新排列。只需使具有特定类的元素看起来就好像在没有该类的其他元素之上。

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

score 2 · Accepted Answer

使用纯 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);
});

编辑：

要使用纯 CSS 执行此操作，请使用绝对定位。这是您需要的 css 示例：

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

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

css - 使列表元素出现的css方式在列表顶部有某个类