Как скрыть наползающий текст?

голоса: 0

Здравствуйте.

Делаю для нужд сайта мини-менюшку, чтобы по клику на ссылку открывалось окошко с информацией на html, и получаю вот такой косяк.
http://i105.fastpic.ru/big/2018/0614/a4/0fe60df4d7ed33d418048c75b200f9a4.png

Нужно как-то скрыть эти ссылки и текст, дабы открывшееся меню было поверху этого текста, а не за ним. Это реально как-то сделать, например, через css? Код страницы:
 

   <!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title>Название документа</title>     <style>       #zatemnenie {         background: rgba(102, 102, 102, 0.5);         width: 100%;         height: 100%;         position: fixed;         top: 0;         left: 0;         display: none;       }       #okno {         width: 80%;         height: 80%;         text-align: center;         padding: 15px;         border: 3px solid #0000cc;         border-radius: 10px;         color: #0000cc;         position: absolute;         top: 0;         right: 0;         bottom: 0;         left: 0;         margin: auto;         background: #fff;       }       #zatemnenie:target {display: block;}       .close {         display: inline-block;         border: 1px solid #0000cc;         color: #0000cc;         padding: 0 12px;         margin: 10px;         text-decoration: none;         background: #f2f2f2;         font-size: 14pt;         cursor:pointer;       }       .close:hover {background: #e6e6ff;}     </style>   </head>     <body>         <div id="zatemnenie">       <div id="okno"> 		<p><strong>Информация об организации представлена в документе:</strong></p> 		<object data="http://uk-lider.org/Org_info/Organization_Info.pdf" height="400" type="application/pdf" width="700"></object><br>         Всплывающее окошко!<br>         <a href="#" class="close">Закрыть окно</a>       </div>     </div>           <a href="#zatemnenie">Вызвать всплывающее окно</a>     </body> </html> 

 

| Автор: | Категория: Дизайн сайта

Ответов: 1

голоса: 0
 
Лучший ответ
Откройте доступ к странице так как проблему видно лишь на скриншоте.
| Автор:
Выбор ответа лучшим | | Автор: Александр111
открыл. По сути весь текст за этим пропадает, а вот менюшка сайта в левой части накладывается получается, и выходит крайне некрасиво.
Александр111,

Поправьте стили:

#zatemnenie {
    background: rgba(102, 102, 102, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 100;
}

добавьте выделенное красным.

...