Question

我的HTML中有一个按钮，我想要在该按钮下面显示一些内容，它应该在所有其他内容之上，并且不应该移动任何现有内容。我怎样才能实现它？

Answer 1

将该内容放入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 2

不确定您要实现的目标，但请查看此示例以使用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 3

Here是关于css位置的好文章，可以在alistapart上找到。

如果你不是100％熟悉定位，那么看看你的问题必须阅读。

删除按钮下方的内容

3 个答案: