Как сделать так, чтобы div отображался по всему сайту? - PullRequest
Новая
       11

Как сделать так, чтобы div отображался по всему сайту?

3 голосов
/ 06 июля 2010

Я пытаюсь сделать непрозрачность 50% <div> по всему сайту, я присвоил ей абсолютную позицию и ширину, высоту 100%. но он по-прежнему отображается только в отдельных частях сайта, если прокрутить вниз, он не охватывает остальную часть сайта. 

<div style="width:100%; height:100%; margin:0; top:0; left:0; background:#000; position: absolute;">
   loading..
</div>

Что я могу сделать?

Ответы [ 3 ]

12 голосов
/ 06 июля 2010

Используйте position: fixed; вместо position: absolute;: 

<div style="width: 100%; height: 100%; margin: 0em;
            left: 0em; top: 0em; background: black;
            position: fixed;">Loading ...</div>
6 голосов
/ 06 июля 2010

Это тоже работает: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
    #big {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #000;
    }
</style>
</head>
    <body>
        <div id="big"></id>
    </body>
</html>

Установка top и bottom должна помочь (также работает с position: fixed).

1 голос
/ 28 марта 2016

Использование z-index , пример: 

<style scoped="scoped" type="text/css">
	
	.imgWrap {
		position: relative;
		width: 25%x;
	}
	
	.imgDescription {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.75);
		color: #fff;
		visibility: hidden;
		opacity: 0;
		height: 400px;
		width: 400px;
		padding: 5px 5px 5px 5px;
		z-index: 100;
	}
	
	.imgWrap:hover .imgDescription {
		visibility: visible;
		opacity: 1;
	}
</style>

<table style="width: 100%;">
  <tbody>
    <tr>
      <td style="width: 100%;">
        <div class="imgWrap">
		  <p style="text-align: left;"><strong>Text</strong></p>
		  <p>&nbsp;</p>
		  <div class="imgDescription">
		  <ul style="text-align: left;">
		  <li>Description...</li>							
		  </ul>
		</div>
	  </div>
     </td>
    </tr>
  </tbody>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...