HTML佈局 - 在代碼中第一個元素，但最後

Question

頁面

在我的下一個HTML代碼（jsFiddle）：

<div class="content"> 
    <div class="first-block"> 
     Mauris at tortor vel nulla rutrum porta. Etiam non ... 
    </div> 
    <div class="second-block"> 
     Suspendisse suscipit tortor eu nulla interdum ... 
    </div> 
</div> 

是否有可能用CSS來製作first-block出現在頁面上second-block後？僅在視覺上，而html佈局保持不變。這是某種搜索引擎優化。

Answer 1

如果你使用絕對位置，這是可能的。但你必須有預定義的高度，以不破壞你的佈局

.content { 
    width: 400px; 
    height:200px; 
    margin: 0 auto; 
    position:relative; 
} 

.first-block { 
    background: coral; 
    position:absolute; 
    bottom:0; 
} 

.second-block { 
    background: #DEDEDE; 
    position:absolute; 
    top:0; 
} 

這裏是jsFiddle demo

Answer 2

這是通過使用float和margin性能成爲可能。

我只是將你的兩個divs漂浮在兩邊，當然還有中間的clear:both，以阻止它們重疊。一旦完成，我用margin-top正面和負面的價值來定位divs好像第一個低於第二個，實際上第一個高於代碼中的第二個。

CSS

.content { 
    width: 400px; 
    margin: 0 auto; 
} 

.first-block { 
    background: coral; 
    margin-top:300px; 
    float:left; 
} 

.second-block { 
    background: #DEDEDE; 
    margin-top:-300px; 
    float:right; 
} 

HTML

<div class="content"> 
    <div class="first-block"> 
     Mauris at tortor vel nulla rutrum porta. Etiam non condimentum velit. Phasellus turpis magna, sagittis at porta et, tincidunt id magna. Maecenas hendrerit suscipit massa, at consectetur magna tempor et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Etiam accumsan. 
    </div> 
    <div style="clear:both;"></div> 
    <div class="second-block"> 
     Suspendisse suscipit tortor eu nulla interdum sit amet ultricies ante imperdiet. Donec varius adipiscing lectus in suscipit. Nunc risus arcu, luctus nec tempor porttitor, sodales eget lectus. Vestibulum imperdiet massa in ligula pellentesque eget egestas dui facilisis. Nunc commodo lacus at nibh tristique sodales 
    </div> 
</div> 

Heres a fiddle demo for you!