Question

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

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

有人可以帮忙吗？

Answer 1

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

使用z-index属性。请参阅 Specifying the stack level: the 'z-index' property 和

<强> Elaborate description of Stacking Contexts

像

这样的东西

#divOnTop { z-index: 1000; }

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

你必须注意的是IE6。在IE 6中，一些元素如<select>将放置在z-index值高于<select>的元素之上。您可以通过在div后面放置<iframe>来解决此问题。

请参阅 Internet Explorer z-index bug?

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>

Answer 4

您可以使用position:absolute在表格/ div中添加position:relative的div。例如，如果您希望叠加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>

请在此处查看：http://jsfiddle.net/bptvt5kb/

Answer 5

以div的风格进行这些更改

z-index:100;某个更高的值可确保此元素首先
position:fixed;这确保即使滚动完成，也

div位于顶部且始终可见

Answer 6

使用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>

当第一个div的显示设置回block时，它会出现并向下移动第二个div。

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

6 个答案: