网页设计 层的叠放顺序,该怎么解决
日期：2014-05-17 浏览次数：20708 次
网页设计 层的叠放顺序
我想在网页建一个覆盖层，点击按钮时这个覆盖层覆盖了页面上所有东西，请问该怎么做呢，我做的时候只能覆盖部分，对于其他层还是覆盖不了。
还有层的透明度怎么设置呢？
怎样让层显示在页面中央？
主要效果就是点击登陆按钮，弹出一个层，另外有新的层覆盖页面的东西，达到后面页面呈现灰色，亮点集中在弹出层，而这个弹出层显示在页面的正中央
谢谢大家了
------解决方案--------------------
我想在网页建一个覆盖层，点击按钮时这个覆盖层覆盖了页面上所有东西，请问该怎么做呢，我做的时候只能覆盖部分，对于其他层还是覆盖不了。
还有层的透明度怎么设置呢？
怎样让层显示在页面中央？
主要效果就是点击登陆按钮，弹出一个层，另外有新的层覆盖页面的东西，达到后面页面呈现灰色，亮点集中在弹出层，而这个弹出层显示在页面的正中央
谢谢大家了
------解决方案--------------------
- HTML code
<!DOCTYPE html >
<html>
<head>
<meta charset="gb2312" />
<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
.go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
ul,li{ list-style:none;}
.wrapper { border:1px solid #e6e6e6;padding:50px;}
.black_overlay{position: fixed; z-index:1000;width: 100%;height: 100%;top: 0;left: 0;filter: alpha(opacity=80);opacity: 0.8;overflow: hidden;background-color: #000;}
*html { background:url(*) fixed; }
*html body { margin:0; height:100%; }
*html .black_overlay{ position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); }
.white_content {display: none;position: absolute;top: 15%;left: 25%;width: 632px;height: 445px;border: 16px solid #FFF;border-bottom:none;background-color: white;z-index:1002;overflow: auto;}
</style>
<body>
<div class="wrapper">
<p style="font-size:50px"><a href="javascript:" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点我试下</a></p>
<div id="light" class="white_content"><a href = "javascript:" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">关闭</a></div>
<div id="fade" class="black_overlay" style="display:none;"></div>
</div>
</body>
</html>
------解决方案--------------------
看看这个，研究了挺久
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#addnew{cursor:pointer; padding:3px 10px; background:orange}
#overlay{position:absolute; top:0; left:0; width:100%; height:100%; background:#666666; display:none;}
#tan{position:absolute; width:400px; height:150px; background:#fff; border:2px solid #4880EF; display:none;}
#tan div#title{font-size:12px; height:18px; line-height:18px; background:#FC0; border-bottom:1px solid #4880EF; padding:5px;}
#tan span#close{float:right; color:red; cursor: pointer; background:#fff; border:1px solid #f90; padding:0 10px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js " type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#addnew").click(function () {
//遮罩层：设置透明度，高宽度（覆盖所有内容）
$("#overlay").css({'opacity':0.7,'width':$(document).width(),'height':$(document).height()}).fadeIn(0);
//弹出层 设置永远 垂直水平居中显示
var pTop = $(window).height()/2 + $(window).scrollTop()- $("#tan").outerHeight(true)/2;
var pLeft = $(window).width()/2 + $(window).scrollLeft() - $("#tan").outerWidth(true)/2
$("#tan").css({ 'top': pTop,'left':pLeft }).fadeIn();
});
//弹出层关闭按钮
$("#close").click(function () {
$("#tan").fadeOut(0);
$("#overlay").fade
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
