如何使<div>出现在常规文本/表格的前面

Question

我一直试图让DIV框出现在我在网页上的文本/表格前面.

通过按钮按下可以看到DIV; 但是当它可见时,它会自动向下移动文本/表格,并在其上方包含DIV内容.

有人可以帮忙吗？

Answer 1

您可以使用div的堆叠索引使其显示在其他任何内容之上.使其成为一个更大的价值,其他元素,并在其他元素之上.

使用z-index财产.请参阅指定堆栈级别:'z-index'属性和

详细描述堆叠上下文

就像是

#divOnTop { z-index: 1000; }

<div id="divOnTop">I am on top</div>

您需要注意的是IE6.在IE 6中,一些元素<select>将被放置在z-index值高于的元素之上<select>.您可以通过<iframe>在div后面放置一个解决方法.

看到这个Internet Explorer z-index错误？

Answer 2

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> 

Answer 3

由于没有太多空间，它会将表格向下移动，请尝试减小/增加某些元素的宽度，以便找到一些空间并且不会将表格向下推。另外，您可能希望使用absolute定位将div精确定位在所需位置，例如：

<style>
 #div_id
 {
   position:absolute;
   top:100px; /* set top value */
   left:100px; /* set left value */
   width:100px;  /* set width value */
 }
</style>

如果您想将其显示在某物上，则还需要给它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>