如何让div出现在整个网站？

我试图做出一个50％的不透明度<div>出现在整个网站，我给它的位置绝对和宽度，100％的高度。但它仍然只出现在网站的某些部分，如果向下滚动，它不会覆盖网站的其他部分。如何让div出现在整个网站？

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

我该怎么办？

来源

2010-07-06 WEBProject

代码示例将在这里帮助了很多... – Chris 2010-07-06 10:21:16

这是div ..即时通讯后trigering它'submit' – WEBProject 2010-07-06 10:21:55

使用position: fixed;代替position: absolute;：

<div style="width: 100%; height: 100%; margin: 0em; 
      left: 0em; top: 0em; background: black; 
      position: fixed;">Loading ...</div>

来源

2010-07-06 10:25:02

这工作太：

<?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）。

来源

2010-07-06 10:27:44 Mike

至少在我的FF中，它的工作原理是：http://jsbin.com/odocu; +1 – Boldewyn 2010-07-06 10:33:51

我不知道左边，右边，底部，顶部'诡计'。 – 2010-07-06 10:39:19

@Boldewyn：谢谢 - 我已经尝试过最新版本的Firefox，Opera，Safari和IE。我还没有尝试过早期版本。 @Christopher Altman：乍一看他们有点反直觉，但通常工作得很好。 – Mike 2010-07-06 10:41:34

使用的z-index，例如：

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

 
<table style="width: 100%;"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="width: 100%;"> 
 
     <div class="imgWrap"> 
 
\t \t <p style="text-align: left;"><strong>Text</strong></p> 
 
\t \t <p>&nbsp;</p> 
 
\t \t <div class="imgDescription"> 
 
\t \t <ul style="text-align: left;"> 
 
\t \t <li>Description...</li> \t \t \t \t \t \t \t 
 
\t \t </ul> 
 
\t \t </div> 
 
\t </div> 
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

来源

2016-03-28 12:27:39

如何让div出现在整个网站？

回答

相关问题