关于样式div层被覆盖,如何把覆盖的显示在上面
作者&投稿：铎丹 （若有异议请与网页底部的电邮联系）
1、首先需要做的就是创建两个div。
2、创建了div后，我们需要分别给它们Class属性。
3、接下来，我们使用css，通过Class属性给它们设置样式。
4、我们需要给于它们一个宽度与高度，为了便于观察，我们可以给它们一个边框，这样便于观察。
5、接下来，我们先给不悬浮的div设置样式，我们给它设置一个背景颜色。
6、接下来，我们设置悬浮起来的div的样式，我们需要先将其进行绝对定位。设置其position。
7、接下来，我们设置浮动div的位置，需要使用到的是top与left.具体如下图所示，同时，为了便于观察，我将悬浮的div的宽度与高度修改了。
html,body {
margin: 0;
}
.footer-over {
position: relative;
width: 100%;
height: 1600px;
background: #f7f7f7;
color: #444;
margin-bottom: 300px;
z-index: 10;
}
.site-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 300px;
background: #1a1a1a;
color: #ddd;
z-index: 0;
}
这是滚动的上层
这是滚动的上层
这是滚动的上层
这是滚动的上层
这是滚动的上层
这是固定的下层
这是固定的下层
这是固定的下层
这是固定的下层
这是固定的下层
zIndex越大，越在上层，你想要被覆盖的在上面，那么你的那个hidDiv的zindex要小于原来的那个div
<script>
function showhidden(id,i){
var select_obj=document.getElementsByTagName("select");
if(i==1){
document.getElementById(id).style.display="";
document.getElementById(id).style.zIndex=-1;
}else{
document.getElementById(id).style.display="none";
}
}
</script>
<div onMouseOver="showhidden('hidDiv1','1');" onMouseOut="showhidden('hidDiv1',0);">
<div style="width:200px; height:33px; margin-bottom:3px;z-index:0"><a href="#"><img src="http://d1.sina.com.cn/200901/14/164840.jpg" /></a></div>
<!--浮动层-->
<div id="hidDiv1" style="width:69px;display:none;position:absolute;margin-left:60px;"><div style="position:absolute"><img src="/ress/images/home4/div_left_coin.gif" height="19" width="11"/></div>
<table title="业务办理" width="100%" border="0" cellspacing="0" cellpadding="0" height="100" style="float:right;width:260px;border:2px solid #b6b4b4;background-color:#ffffff;margin-left:-1px;margin-top:-60px;padding:0px;padding-top:0px;text-align:center;padding-left:3px;z-index:100">
<tr><td height="10">helphelp</td></tr>
>
<tr>
<td style="border-bottom:#e5e5e5 dashed 1px; color:#2883d4;" height="30">aaaaaaaaaaaaaa</td>
</tr>
</table>
<script>
function showhidden(id,i){
var select_obj=document.getElementsByTagName("select");
if(i==1){
document.getElementById(id).style.display="";
document.getElementById(id).style.zIndex=1;
}else{
document.getElementById(id).style.display="none";
}
}
</script>
<div onMouseOver="showhidden('hidDiv1','1');" onMouseOut="showhidden('hidDiv1',0);">
<div style="width:200px; height:33px; margin-bottom:3px"><a href="#"><img src="http://d1.sina.com.cn/200901/14/164840.jpg" /></a></div>
<!--浮动层-->
<div id="hidDiv1" style="width:69px;display:none;position:absolute;margin-left:60px;"><div style="position:absolute"><img src="/ress/images/home4/div_left_coin.gif" height="19" width="11"/></div>
<table title="业务办理" width="100%" border="0" cellspacing="0" cellpadding="0" height="100" style="float:right;width:260px;border:2px solid #b6b4b4;background-color:#ffffff;margin-left:-1px;margin-top:-60px;padding:0px;padding-top:0px;text-align:center;padding-left:3px;z-index:100">
<tr><td height="10">helphelp</td></tr>
>
<tr>
<td style="border-bottom:#e5e5e5 dashed 1px; color:#2883d4;" height="30">aaaaaaaaaaaaaa</td>
</tr>
</table>
看一下是不是这种效果
<script>
function showhidden(id,i){
var select_obj=document.getElementsByTagName("select");
if(i==1){
document.getElementById(id).style.display="";
}else{
document.getElementById(id).style.display="none";
}
}
</script>
<div onmouseover="showhidden('hidDiv1','1');" onmouseout="showhidden('hidDiv1',0);">
<!--浮动层-->
<div id="hidDiv1" style="width: 69px; display: none; position: absolute; margin-left: 60px;
z-index: 100">
<table title="业务办理" width="100%" border="0" cellspacing="0" cellpadding="0" height="100"
style="float: right; width: 260px; border: 2px solid #b6b4b4; background-color: #ffffff;
margin-left: -1px; margin-top: 20px; padding: 0px; padding-top: 0px; text-align: center;
padding-left: 3px; z-index: 100">
<tr>
<td height="10">
helphelp
</td>
</tr>
<tr>
<td style="color: #2883d4;" height="30">
aaaaaaaaaaaaaa
</td>
</tr>
</table>
</div>
<div style="width: 200px; height: 33px; margin-bottom: 3px; z-index: 0">
<a href="#">
<img src="http://d1.sina.com.cn/200901/14/164840.jpg" /></a></div>
如果A要覆盖B．就把A放在B的上面。你放在下面怎么可能覆盖得了上面呢
还有这个样式写的很不规范。许多不必要的样式．建议规范书写，看得有点小麻烦哦～
霜砌迪立： div覆盖着另一个div,是因为其中一个或者两个脱离了文档流.常见脱离文档流主要原因有:1. div浮动造成,常用解决方法是清除浮动2. div受到相对定位或者绝对定位的影响,定位是可以设置left,right,bottom,top,等位置样式的,解决方法一般是清除定位,或者解决兼容性,合理控制left,right ,bottom,top四个属性的值. 另外还有一种不常见的情况,例如margin的负数值,可以造成div偏离原来的位置,建议合理设置即可.
小店区18721673645： 怎么样让div 覆盖另外一个div? - ？
霜砌迪立： <html> <head> <style> .main{width:400px;height:200px;border:1px solid #cccccc;} .one{width:100px;height:60px;text-align:center;border:1px solid #FF9966;background:#66CCFF; } .two{width:100px;height:60px;text-align:center;...
小店区18721673645： CSS样式覆盖问题 - ？
霜砌迪立： 请按照下面标准执行即可; 1.行内样式>指定样式>通用class样式>通用未指定CLASS样式 2.例子: 1)<div style=＂...＂>aaaaaa</a>这就是指定用style的行内样式; 2)<div id=＂side＂ >aaaaaa</div>这就是指定id使用side样式; 3)<div class=＂ot＂>aaaaaa</div>这就是指了通用的class为ot的样式; 4)如<body><table><tr><th>这些一开始样式文件就定义好全程的样式,为通用为指定的样式; 最高就是指行内样式,接着就是指定ID的,然后就是CLASS,最后就是未指定通用样式;
小店区18721673645： 关于一个DIV覆盖于另一个DIV下 - ？
霜砌迪立： 出现这种情况可能是弹出框的div所在的父元素的层级(z-index)比原来DIV的层级小,在这种当父元素的层级小于另外一个DIV层的情况下 子元素的层级设置再高也不会盖住DIV层.解决方法:弹出框的div设置与原来DIV为兄弟元素// 其实方法很多,你要是把代码贴出来,才能根据你的代码做最少的修改
小店区18721673645： 如何解决div层被flash遮盖的问题 - ？
霜砌迪立： 今天测试div层和flash的交互,发现div层总是被flash层遮盖.今天测试div层和flash的交互,发现div层总是被flash层遮盖,在百度上找了一会,说是加个name=＂wmode＂ value=＂transparent＂ />就成了,我加完后在IE下问题是解决了,但是FF下...
小店区18721673645： 怎么使外面的DIV去覆盖里面的DIV? - ？
霜砌迪立： 给外层position:absolute; z-index:1;left:;top:;
小店区18721673645： 如何使样式CSS不被覆盖 important - ？
霜砌迪立： 一般直接问important的样式不被覆盖,这样是误解的,因为解决办法也需要使用important 解决办法一: div{font-size:100px!important;} div{font-size:50px!important;} 这样下面的样式就覆盖了上面的样式,使第一个样式失效 解决办法二:123456 行内样式级别大于,外部样式,所以这样也可以去除以前设置的important的样式. 其他的方式,我还真没有找到能可以代替的办法,希望我的回答对你有所帮助!!!
小店区18721673645： 如何解决DIV层被Flash动画遮盖问题 - ？
霜砌迪立： 应该是用z-index属性,数值越大,越显示在前面
小店区18721673645： 怎样一个DIV层覆盖另一个DIV - ？
霜砌迪立： 可以用<DIV STYLE=＂position:absolute;left=10;top=20＂> 你的内容</DIV><DIV STYLE=＂position:absolute;left=15;top=25＂> 你的内容</DIV> 看到了吗?关键在于设置div的位置 要是还有不明白的Q我152718376,我帮你讲解
小店区18721673645： dreamweaver 我有2个div层 分别都用了css背景图片 如何做才能让期中一个div层覆盖在另一个上方? - ？
霜砌迪立： 层定位后.一个层设:z-index:100 一个层设:z-index:99 数大在上面
