Как сделать <отделение>, появляются перед обычным текстом / таблицы

Question

Как сделать <отделение>, появляются перед обычным текстом / таблицы

Я пытался заставить поле DIV появиться перед текстом/таблицами, который я имею на веб-странице.

DIV сделан видимым через нажатие кнопки; но когда видимый это автоматически опускает текст/таблицу и включает содержание DIV выше его.

Кто-либо может помочь?

18

css xhtml

задан privateace 23 February 2010 в 03:58

5 ответов

Accepted Answer

Вы можете использовать индекс наложения блока div, чтобы он отображался поверх всего остального. Сделайте его более ценным, чем другие элементы, и он будет лучше других.

использовать свойство z-index . См. Определение уровня стека: свойство 'z-index' и

Подробное описание контекстов стекирования

Что-то вроде

#divOnTop { z-index: 1000; }

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

То, на что вам нужно обратить внимание, будет IE6. В IE 6 некоторые элементы, такие как . Для этого можно найти обходной путь, поместив </code> за div. </p> <p> См. Эту <strong><a href="https://stackoverflow.com/questions/1156192/internet-explorer-z-index-bug"> ошибку z-индекса Internet Explorer? </a></strong></p> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">39</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="30 November 2019 в 06:07 ">30 November 2019 в 06:07 </span> </div> <a class="s-link" href="/questions/315521/kak-sdelat-lt-otdelenie-gt-pojavljajutsja-pered-obychnym-tekstom-tablicy#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-754691"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="754692" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> z-index работает только с абсолютными или относительно позиционированными элементами. Я бы использовал внешний div, установленный для относительной позиции. Установите элемент div сверху в положение absolute, чтобы удалить его из потока документа. </p> <p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code> .wrapper {position: relative; width: 500px;} .front {border: 3px solid # c00; цвет фона: #fff; ширина: 300 пикселей; позиция: абсолютная; z-индекс: 10; верх: 30 пикселей; слева: 50 пикселей; } .behind {background-color: #ccc;} </code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code> <div class = "wrapper"> <p class = "front"> Пеллентески обитатель morbi tristique senectus et netus et malesuada славится ac turpis egestas. Vestibulum toror 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> Пеллентовские обитатели morbi tristique senectus et netus et malesuada, известные ac turpis egestas.</ P> <таблица> <thead> <tr> <th> AAA </ th> <th> BBB </ th> <th> CCC </ th> <th> D </ th> </ tr> < / thead> <tbody> <tr> <td> 111 </ td> <> 222 </ td> <> 333 </ td> <> 444 </ td> </ tr> </ tbody> </ table> <p> Жители Седа болезни старости печальны и уродливы netus et malesuada голод и нищета. Питание жителей футбол печально старых и некрасивых netus et malesuada голода и бедности. Питание жителей футбол грустный старый и уродливый netus et malesuada голод и нищета. </P> </ DIV> </ DIV> </code></pre> </div> </div> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">15</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="30 November 2019 в 06:07 ">30 November 2019 в 06:07 </span> </div> <a class="s-link" href="/questions/315521/kak-sdelat-lt-otdelenie-gt-pojavljajutsja-pered-obychnym-tekstom-tablicy#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-754692"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="754693" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p>Он сдвигает таблицу вниз, потому что нет много места, попробуйте уменьшить/увеличить ширину определенных элементов, чтобы он нашел немного места и не сдвигал таблицу вниз. Также вы можете использовать <code>абсолютное</code> позиционирование, чтобы расположить div в нужном месте, например: </p> <pre><code><style> #div_id { position:absolute; top:100px; /* set top value */ left:100px; /* set left value */ width:100px; /* set width value */ } </style> </code></pre> <p>Если вы хотите расположить div <strong>над</strong> чем-то, вам также нужно задать ему <code>z-index</code>, так что это может выглядеть так: </p> <pre><code><style> #div_id { position:absolute; z-index:999; top:100px; /* set top value */ left:100px; /* set left value */ width:100px; /* set width value */ } </style> </code></pre> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">5</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="30 November 2019 в 06:07 ">30 November 2019 в 06:07 </span> </div> <a class="s-link" href="/questions/315521/kak-sdelat-lt-otdelenie-gt-pojavljajutsja-pered-obychnym-tekstom-tablicy#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-754693"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="754694" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p>Используйте свойство display в CSS:</p> <pre><code><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> </code></pre> <p>Когда display первого div будет установлен обратно в <code>block</code>, он появится и сместит второй div вниз. </p> </div> <div class="votes-answer"> <div class="vote-count" itemprop="upvoteCount">-3</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="30 November 2019 в 06:07 ">30 November 2019 в 06:07 </span> </div> <a class="s-link" href="/questions/315521/kak-sdelat-lt-otdelenie-gt-pojavljajutsja-pered-obychnym-tekstom-tablicy#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-754694"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="758588" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> внесите эти изменения в стиль вашего div </p> <ol> <li><code> z-index: 100; </code> более высокое значение гарантирует, что этот элемент находится выше всех </li> <li><code> position: fixed; </code> это гарантирует, что даже при прокрутке выполнено, </li> </ol> <p> div лежит сверху и всегда виден </p> </div> <div class="votes-answer"> <div class="vote-count" itemprop="upvoteCount">0</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="30 November 2019 в 06:07 ">30 November 2019 в 06:07 </span> </div> <a class="s-link" href="/questions/315521/kak-sdelat-lt-otdelenie-gt-pojavljajutsja-pered-obychnym-tekstom-tablicy#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-758588"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div style="margin-top: 20px;"> Другие вопросы по тегам: <div class="tags" style="display: inline-block; float: none;"> <a href="/questions/tagged/css" class="tag" title="css" rel="tag">css</a> <a href="/questions/tagged/xhtml" class="tag" title="xhtml" rel="tag">xhtml</a> </div> <h3 class="m-t-20">Похожие вопросы:</h3> <div class="related-block"> <ul> <li><div class='votes-answer green'><span class='vote-count'>55</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/87787/pochemu-by-ne-ispolzovat-tablicy-dlja-razmetki-v-html-zakryto" title="Почему бы не использовать таблицы для разметки в HTML? [закрыто]">Почему бы не использовать таблицы для разметки в HTML? [закрыто]</a> - 6 November 2018 00:07 </li> <li><div class='votes-answer green'><span class='vote-count'>36</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/182086/skrytye-funkcii-html" title="Скрытые функции HTML">Скрытые функции HTML</a> - 23 May 2017 12:18 </li> <li><div class='votes-answer green'><span class='vote-count'>36</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/90066/kak-sdelat-div-ne-bolshe-ego-soderzhimogo" title="Как сделать div не больше его содержимого?">Как сделать div не больше его содержимого?</a> - 20 September 2015 12:27 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/11688/ustanovit-vy-sotu-div-v-ne-rabotaet-dublirovat" title="Установить высоту div в% не работает [дублировать] ">Установить высоту div в% не работает [дублировать] </a> - 15 July 2015 15:37 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/2043/ispol-zovanie-shiriny-vidovy-x-e-kranov-dlya-razmera-shrifta-kak-ya-mogu-ubedit-sya-chto-oni-otnosyatsya-k-roditel-skomu-kontejn" title="Использование ширины видовых экранов для размера шрифта, как я могу убедиться, что они относятся к родительскому контейнеру, а не к окну просмотра? [Дубликат] ">Использование ширины видовых экранов для размера шрифта, как я могу убедиться, что они относятся к родительскому контейнеру, а не к окну просмотра? [Дубликат] </a> - 30 June 2016 03:39 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/12123/uncaught-z-yntaxerror-neozhidanny-j-identifikator-v-konsoli-javaz-cript-dublikat" title="Uncaught SyntaxError: Неожиданный идентификатор в консоли javascript [дубликат] ">Uncaught SyntaxError: Неожиданный идентификатор в консоли javascript [дубликат] </a> - 9 February 2016 07:59 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/3875/chto-mne-ne-xvataet-chtoby-sosredotochit-e-tot-div-izobrazheniya-dublikat" title="Что мне не хватает, чтобы сосредоточить этот div / изображения? [Дубликат] ">Что мне не хватает, чтобы сосредоточить этот div / изображения? [Дубликат] </a> - 6 July 2018 20:42 </li> </ul> </div> </div> </div> </div> </div> <aside class="sidebar"> <div class="awrap"> <script async src="https://yastatic.net/pcode-native/loaders/loader.js"></script> <script> (yaads = window.yaads || []).push({ id: "553274-2", render: "#id-553274-2" }); </script> <div id="id-553274-2"></div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-2355906945027976" data-ad-slot="8038370725"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </aside> </div> </div> <footer class="footer"> <div class="wrapper wrapper--sm"> <div class="footer-navs-col"> <div class="footer-nav footer-nav--menu"> <div class="footer-coryright">© 2017 - 2020 Вопросы и ответы по программированию</div> </div> <div class="footer-nav footer-nav--catalog"> </div> </div> <div class="footer-contacts-col"> <div class="soc-widget-col"> </div> </div> <div class="clearfix"></div> </div> </footer> </div> <script type="text/javascript" src="/js/ui/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="/js/ui/external/jquery.cookie.js"></script> <script type="text/javascript" src="/js/versions/menu.ru.u1607887878.js"></script> <script type="text/javascript" src="/js/jquery.fancybox.min.js"></script> <script type="text/javascript" src="/js/slick.min.js"></script> <script type="text/javascript" src="/js/jquery.maskedinput.min.js"></script> <script type="text/javascript" src="/js/versions/scripts.ru.u1607887878.js"></script>  <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; var z = null;m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(90030325, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/90030325" style="position:absolute; left:-9999px;" alt="" /></div></noscript>   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123993370-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-123993370-1'); </script> </div> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "Программирование - вопросы и ответы", "alternateName": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "potentialAction": { "@type": "SearchAction", "target": "https://legkovopros.ru/search?search={search_term_string}", "query-input": "required name=search_term_string" } } { "@context": "https://schema.org", "@type": "Organization", "name": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "logo": "https://legkovopros.ru/i/logo.png", "email": "info@legkovopros.ru", "telephone": "" } </script> </body> </html>