0

假设我有这个 HTML 页面：

<body>
<p id="alice">Alice</p>
<p id="bob">Bob</p>
</body>

这个假装的 CSS 语法：

p#alice:before { p#bob }

换句话说，我想使用 CSS 覆盖 HTML，将 Bob 元素放在 Alice 元素之上。为什么？因为就我而言，我可以编辑 CSS，但无法编辑 HTML。

Bob 在 DOM 中不必实际出现在 Alice 之前，但它确实需要在视觉上出现在 Alice 之上。

4

3 回答 3

5

使用完全灵活的纯 CSS 执行此操作的唯一方法是使用 flexbox。

http://jsfiddle.net/S9L3r/（不包括前缀）

body {
    display: flex;
    flex-flow: column nowrap;
}

#alice {
    order: 2;
}

http://caniuse.com/#feat=flexbox

于 2013-01-25T01:33:27.343 回答
2

如果您能够添加代码，您始终可以使用 jQuery 来执行此操作。

$('#bob').insertBefore('#alice');
于 2013-01-24T22:48:03.310 回答
0

这很容易但很难看，你不应该这样做。

然而，这里是如何做到这一点：

http://jsbin.com/azevet/2/edit

<div class="first-in-dom">
  Im first in DOM
  </div>
<div class="second-in-dom">
  Im second in DOM
  </div>


div {
  height:100px;
  border:solid;
}
.first-in-dom, .second-in-dom {
  position:relative;
}
.first-in-dom {
  margin-bottom:-100px;
    top:110px;

}
于 2013-01-24T22:42:50.533 回答