使用內聯CSS將元素放置在由外部樣式表指定的塊周圍的最佳方式是什麼？

Question

如何爲頁面的表單生成部分指定一個位置，然後使用內聯CSS在其上放置元素？ https://org2.democracyinaction.org/o/6351/p/salsa/event/common/public/?event_KEY=50926

我們半烤的臨時解決方案使用多個絕對元素。不幸的是，這些執行不同的跨瀏覽器，並在移動設備上尤其糟糕（導致頁面元素內溢出和滾動）。

這是我除了外部樣式表，移動形式產生的註冊框向上和向左：

#regForm {width: 400px; position:absolute; clear:left; top:315px; } 

這裏是我的直列企圖安排它周圍的div元素：

<div> top element (quotes) 
</div> 
<div style="height:2400px"></div> 
//I put this in to keep the bottom page border from overlapping the absolute divs 

<div style="position: absolute; top: 350px; left: 450px; width: 520px; 
overflow: auto; margin: 0px; padding: 0px;"> 
right column (of explanation text) </div> 
<p></p> 
<div style="position: absolute; top: 815px; left: 15px; width: 400px; 
overflow: auto; margin: 0px; padding: 0px;"> 
left column (more info about the #regForm box above, plus images) </div> 

我們需要實現什麼：

[   top element   ] 

[#regForm div] [right column ] 

[left column ] 

約束： 我們正在重新格式化一個表單生成頁面。我有一個輸入面板，我們可以將HTML內容添加到頁面並使用內聯CSS。我們也可以在外部CSS樣式表中添加覆蓋元素，但不能直接編輯整個樣式表。

tl：dr版本：當您無法編輯生成該元素的HTML時，如何使用CSS將頁面中較高的元素（本例中爲#regForm）移動到頁面上方？在沒有樣式的情況下，＃regForm元素只會追加到最後。

Answer 1

如果您希望頁面正常流動並且首先出現#regdiv，您可以浮動列和表單，然後使用jQuery將表單向上移動到文檔樹中。

在的jsfiddle一個例子：http://jsfiddle.net/TjDmw/11/

HTML：

<div id="container"> 
<div id="rightcol"></div> 
<div id="leftcol"></div> 
<div id="regdiv"></div><!--Last in HTML, but moved up with jQuery--> 
</div>​​​​​​​​​​​​​​​​ 

CSS：

#container { 
    border:2px black solid; 
    width:400px;  
    float:left; 
} 
#rightcol{ 
    background:red; 
    width:200px; 
    height:400px; 
    float:right; 
} 
#leftcol{ 
    background:blue; 
    width:160px; 
    height:450px; 
    float:left; 
} 
#regdiv{ 
    background:green; 
    width:140px; 
    height:220px; 
    float:left; 
} 

JS：

$('#regdiv').insertBefore('#rightcol');​