CSS 如何使 <div> 出现在常规文本/表格前面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2316015/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a <div> appear in front of regular text/tables
提问by privateace
I have been trying to make a DIV box appear in front of the text/tables that I have on a webpage.
我一直在尝试使 DIV 框出现在网页上的文本/表格前面。
The DIV is made visible via a button press; but when visible it automatically moves the text/table downward and includes the DIV content above it.
DIV 可通过按下按钮显示；但是当可见时，它会自动将文本/表格向下移动并包含其上方的 DIV 内容。
Can anyone help?
任何人都可以帮忙吗？
回答by rahul
You can use the stacking index of the div to make it appear on top of anything else. Make it a larger value that other elements and it well be on top of others.
您可以使用 div 的堆叠索引使其出现在其他任何内容的顶部。使其成为其他元素的更大值，并且它很好地位于其他元素之上。
use z-indexproperty. See Specifying the stack level: the 'z-index' propertyand
使用z-index财产。请参阅指定堆栈级别：'z-index' 属性和
Elaborate description of Stacking Contexts
Something like
就像是
#divOnTop { z-index: 1000; }
<div id="divOnTop">I am on top</div>
What you have to look out for will be IE6. In IE 6 some elements like <select>will be placed on top of an element with z-index value higher than the <select>. You can have a workaround for this by placing an <iframe>behind the div.
您需要注意的是 IE6。在 IE 6 中，一些元素<select>会被放置在 z-index 值高于<select>. 您可以通过<iframe>在 div 后面放置一个来解决此问题。
See this Internet Explorer z-index bug?
回答by Emily
z-index only works on absolute or relatively positioned elements. I would use an outer div set to position relative. Set the div on top to position absolute to remove it from the flow of the document.
z-index 仅适用于绝对或相对定位的元素。我会使用一个外部 div 设置来定位相对。将顶部的 div 设置为绝对位置以将其从文档流中移除。
.wrapper {position:relative;width:500px;}
.front {
border:3px solid #c00;
background-color:#fff;
width:300px;
position:absolute;
z-index:10;
top:30px;
left:50px;
}
.behind {background-color:#ccc;}<div class="wrapper">
<p class="front">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<div class="behind">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<table>
<thead>
<tr>
<th>aaa</th>
<th>bbb</th>
<th>ccc</th>
<th>ddd</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
</tr>
</tbody>
</table>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div> 回答by Sarfraz
It moves table down because there is no much space, try to decrease/increase width of certain elements so that it finds some space and does not push the table down. Also you may want to use absolutepositioning to position the div at exactly the place you want, for example:
由于没有太多空间，它将表格向下移动，尝试减少/增加某些元素的宽度，以便找到一些空间并且不会将表格向下推。此外，您可能希望使用absolute定位将 div 准确定位在您想要的位置，例如：
<style>
#div_id
{
position:absolute;
top:100px; /* set top value */
left:100px; /* set left value */
width:100px; /* set width value */
}
</style>
If you want to appear it oversomething, you also need to give it z-index, so it might look like this:
如果你想把它显示在某物上，你还需要给它z-index，所以它可能看起来像这样：
<style>
#div_id
{
position:absolute;
z-index:999;
top:100px; /* set top value */
left:100px; /* set left value */
width:100px; /* set width value */
}
</style>
回答by Yvan
You may add a div with position:absolutewithin a table/div with position:relative. For example, if you want your overlay div to be shown at the bottom right of the main text div (width and height can be removed):
您可以position:absolute在表/ div 中添加一个 div position:relative。例如，如果您希望您的叠加 div 显示在主文本 div 的右下方（宽度和高度可以删除）：
<div style="position:relative;width:300px;height:300px;background-color:#eef">
<div style="position:absolute;bottom:0;right:0;width:100px;height:100px;background-color:#fee">
I'm over you!
</div>
Your main text
</div>
See it here: http://jsfiddle.net/bptvt5kb/
在这里看到它：http: //jsfiddle.net/bptvt5kb/
回答by Praveen Prasad
make these changes in your div's style
在您的 div 样式中进行这些更改
z-index:100;some higher value makes sure that this element is above allposition:fixed;this makes sure that even if scrolling is done,
z-index:100;一些更高的值确保这个元素是最重要的position:fixed;这确保即使滚动完成，
div lies on top and always visible
div 位于顶部且始终可见
回答by J Bruno
Use the display property in CSS:
在 CSS 中使用 display 属性：
<body>
<div id="invisible" style="display:none;">Invisible DIV</div>
<div>Another DIV
<button onclick="document.getElementById('invisible').style.display='block'">
Button
</button>
</div>
</body>
When the the display of the first div is set back to blockit will appear and shift the second div down.
当第一个 div 的显示设置回block它时，它将出现并将第二个 div 向下移动。
