Question

假设我有这个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不必在Alice中的Alice之前实际发生，但它确实需要在视觉上显示为ABOVE Alice。

Answer 1

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

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

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

#alice {
    order: 2;
}

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

Answer 2

如果能够添加代码，可以随时使用jQuery执行此操作。

$('#bob').insertBefore('#alice');

Answer 3

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

但是这是如何做到的：

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;

}

CSS：移动一个元素，覆盖它在HTML中的位置

3 个答案: