在內容下方放置內容

Question

我的HTML中有一個按鈕，我希望某些內容恰好位於該按鈕下方，並且應位於所有其他內容之上，並且不應移動任何現有內容。我怎樣才能實現它？

Answer 1

不知道你想什麼來實現的，但看看這個例子使用CSS屬性position：

<p>Other content</p> 
<button>Button Text</button><br /> 
<div style="position:absolute; color:red;">Absolute Text</div> 
<p>Other content</p> 

試試：http://jsfiddle.net/tczc5/

Answer 2

把這些內容變成一個div並使用

position:absolute; 

它應該是這樣的：

<div class="wrapper" style="position:relative;"> 
    <button ..... > 
    <div class="yourContent" style="position:absolute; top:10px; left:0px;"> 
    <!-- put your content here --> 
    </div> 
</div> 

如果你想只在按下按鈕後顯示此內容，然後將其更改爲：

<div class="wrapper"> 
    <button class="yourButton" ..... > 
    <div class="yourContent hidden"> 
    <!-- put your content here --> 
    </div> 
</div> 

定義CSS樣式的樣式表，如：

.wrapper {position:relative;} 
.wrapper .yourButton {position:absolute; top:0; left:0} 
.yourContent {position:absolute; top:20px; left:0} 
.hidden {display:none;} 

然後使用Javascript（使用jQuery）：

$('.yourButton').click(function(){ 
    $('.yourContent').removeClass('hidden'); 
}); 

只是一個簡單的例子，你將不得不調整。

Answer 3

Here是CSS定位的好文章可以在alistapart上找到。

看着你的問題，如果你不是100％熟悉定位，必須閱讀。