Question

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

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

我该怎么办？

Answer 1

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

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

Answer 2

这也有效：

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

Answer 3

使用 z-index ，例如：

＆＃13;

<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>

＆＃13;

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

3 个答案: