將一個元素先移動到另一個元素之前用css/html

是否可以「移動」一個低於另一個元素的全寬元素，以便通過僅使用CSS/HTML顯示上面的元素？（而不是更改標記順序）將一個元素先移動到另一個元素之前用css/html

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

#first {…} 
#second {…}

理想的結果：

 
second 
first

來源

2014-09-30 Daniel Åsberg

只有當你知道第二個元素的確切高度：

#first { 
    margin-top: 20px; 
} 

#second { 
    top: 0; 
    position: absolute; 
}

http://jsfiddle.net/9zmcnedy/

來源

2014-09-30 05:24:19 monkeyinsight

哇，這太容易了。我其實有一個元素的高度。所以我想這對我來說是正確的答案。 – 2014-09-30 05:52:06

您可以使用CSS Flexible Boxes爲此。具體是order屬性。

在此示例中，我添加了寬度和背景顏色以幫助可視化。請注意，瀏覽器對CSS靈活框的支持僅限於現代瀏覽器，如IE 10+，Chrome 21+，Firefox 20+，並且可能無法在移動瀏覽器（尤其是較舊的瀏覽器）中正常運行。

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#first { 
 
    order: 2; 
 
    
 
    width: 10em; 
 
    margin-top: 1em; 
 
    background-color: orange; 
 
} 
 
#second { 
 
    order: 1; 
 
    
 
    width: 10em; 
 
    background-color: yellow; 
 
}

<div class='container'> 
 
    <div id=first> 
 
    first 
 
    </div> 
 
    <div id=second> 
 
    second 
 
    </div> 
 
</div>

來源

2014-09-30 05:24:34

我擔心flex box會是答案，因爲我還必須支持一些較舊的瀏覽器。 – 2014-09-30 05:32:52

Flexbox當然是最靈活的選擇，但正如其他答案所暗示的，如果預先知道塊的高度，還有其他方法可以做到這一點。 – 2014-09-30 05:34:08

我同意。這可能是一年內的正確答案。但對我來說，現在我會與另一個答案一起，因爲我有一個元素的高度。 – 2014-09-30 05:53:43

Js Fiddle

像這樣

#first { position:relative; top:18px} 
#second {position:relative; bottom:18px}

來源

2014-09-30 05:25:05

有一個變通使用position: absolute但是這有一個缺點，即父元素不會延長高度作爲子容器的高度（第一個元素）身高增加。（爲了解決這個問題，你應該使用JavaScript）

CSS

.container { 
    border: 1px solid green; 
    display: inline-block; 
    position: relative; 
} 
#first { 
    position: absolute; 
    top: 100%; 
}

Working Fiddle

來源

2014-09-30 05:51:06

將一個元素先移動到另一個元素之前用css/html

回答

相關問題