仅使用css将div从底部移动到顶部

Question

我有这样的事情：http://jsfiddle.net/my5La/

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>

现在，我想在第一个和第二个div之间移动绿色（第三个）矩形。而且我需要它介于这两者之间，就像它在那里一样（所以第二个矩形向下移动，绿色向上移动）。

现在，当第一个矩形的高度变化时，是否可以这样做？如果没有，是否可能呢？

我需要它，因为谷歌adsense说，html中的第一个广告支付的最多，所以我需要将我的主要广告放到页面底部，因为它没有获得与我的其他广告一样多的点击次数站点（然后将其移回，最好只用css）。

Answer 1

如果没有固定的高度div，很难做到这一点。

您可以使用jQuery的insertBefore或insertAfter：

$("#third").insertBefore($("#second"));

jsFiddle

修改

重新排序广告违反了Google's AdSense Policy

Answer 2

您可以使用flexbox layout的order属性重新排序元素：

/* flexbox on body or any other wrapper */
body {
    display: flex;
    flex-direction: column;
}

#first,
#third {
    order: -1;
}

演示：http://jsfiddle.net/my5La/2/

但与其他人一样，我建议您遵守Google AdSense ToS。

Answer 3

因为它们的形状和大小都相同，所以你可以改变它的颜色，给人一种div的位置发生变化的错觉。看起来比移动实际的HTML元素要容易得多。