Я пытаюсь сделать окно DIV перед текстом/таблицами, которые у меня есть на веб-странице.
DIV становится видимым при нажатии кнопки; но при видимости он автоматически перемещает текст/таблицу вниз и включает в себя содержимое DIV над ним.
Может ли кто-нибудь помочь?
Вы можете использовать индекс стека для 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
z-index работает только с абсолютными или относительно позиционируемыми элементами. Я бы использовал внешний набор div для позиционирования. Установите div сверху, чтобы установить абсолютное значение, чтобы удалить его из потока документа.
CSS
.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>
Он перемещает таблицу вниз, потому что свободного места нет, попробуйте уменьшить/увеличить ширину некоторых элементов, чтобы найти какое-то пространство и не выталкивать таблицу. Также вы можете использовать позиционирование 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>
Вы можете добавить 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/
make these changes in your div style
b> z-index:100; //some higher value makes sure that this element is above all
a> position:fixed; // this makes sure that even if scrolling is done,
div lies on top and always visible
Используйте свойство 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>
Когда отображение первого div будет установлено на block, оно появится и сдвиньте второй div вниз.