Как заставить <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.

См. Ошибка z-index в Internet Explorer?

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

Вы можете добавить div с position:absolute в таблицу / 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>

Смотрите здесь: http://jsfiddle.net/bptvt5kb/

Answer 5

внесите эти изменения в стиль вашего дива

1. z-index:100; некоторое более высокое значение гарантирует, что этот элемент превыше всего
2. position:fixed; это гарантирует, что даже если прокрутка сделана,

div лежит сверху и всегда виден

Answer 6

Используйте свойство display в CSS:

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

Когда дисплей первого делителя снова установлен на block, он появится и сдвинет второй div вниз.