我打开控制台(chrome\firefox)并运行以下行:
$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />");
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>");
#popupContent应该是最重要的,但它受#popupFrame不透明度的影响.
内容不包含在#popupFrame中,这使得这非常奇怪.
目标是创建类似警报框的firefox
我会感激任何帮助.
提前致谢.
我正在尝试使用投影使其看起来像一个div(标题)在另一个"上方".我的问题是"中间"div正在覆盖阴影.我尝试使用z-index将标题div放在中间div上,但它不起作用(阴影仍然被覆盖).当我在div之间休息时,我可以看到阴影,因此我知道代码的一部分工作正常.我有以下HTML代码:
<div id='portal_header_light'>
<img src="Home.png" height="32px" \>
<img src="Wrench.png" height="32px" \>
</div>
<div id='middle'></div>
这个css:
#portal_header_light {
font-family:Arial, Helvetica, sans-serif;
font-size:12px; text-align:center;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
padding: 0px 3px 0px 3px;
background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff));
-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
z-index:5;
}
#middle{
height:308px; …我已经实现了一个动态显示搜索选项的弹出框.我希望该框能够"浮动"在所有网站内容之上.目前,当显示该框时,它取代了它下面的所有内容并且看起来很糟糕.
我相信我已经尝试将盒子div的z-index设置为高于剩余页面内容的z-index,但仍然没有运气.
我正在使用:
box-shadow: 0px -1px 0px #333333;
在我的页脚上,但它隐藏在后面或消失在div前面的地方......很难解释但是这里看起来像是:http://cl.ly/7HLy
是否有办法让页面阴影位于页脚之前的另一个div之上？我尝试添加z-index但它不起作用.
我使用jQuery制作一个div apear,当我点击一个按钮 - >背景应该得到0.8的不透明度,并且出现的div将允许用户让他登录 - 当我不使用z-index时,每个人都可以,但我有4个div(标题,内容,页脚和登录表格的div)标题必须有z-index:3和内容z-index:2 - 否则阴影将无法按预期工作.
使用jQuery我在包含完整边的body标签后面添加一个div - 所以我可以设置不透明度,但是我必须将form-div的z-index设置为高于具有不透明度的div的z-index - 但它不起作用.form-div的z-index是999,另一个div是5
z-index有什么变通方法吗？
如果我在元素的z-index属性中添加负整数值,那么根据标准的预期效果是什么？
我搜索的答案,但只找到了这个:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
的"负值降低优先"不为我意味着什么.
这个div
<div style="position: relative; z-index: 99;">123</div>
如上所示
<div style="position: fixed; z-index: 3000;">456</div>
当我在第一个div中分配z-index:98时一切都很好!如果需要,我可以提供更多代码.
这是一个常见的问题.它几乎总是立即关闭作为这个问题的副本:是否有CSS父选择器？
副本很好地指出父元素不能用CSS作为目标.但它对原始问题几乎没有提供指导,这可能会在XY问题中被捕获.
在这种特殊情况下......
如何在悬停孩子时更改父母的背景颜色？
...至少有一个可以解决问题的CSS解决方案.
<div>
<a href="#">Anchor Text</a>
</div>我知道 z-index 仅适用于定位元素，但我想知道为什么会出现这种情况。这种行为是否有充分的理由，或者它只是那些半任意的规范决策之一？
我在使用这样的代码时遇到了这个问题：
<div>
<img class="not-positioned" src="http://placekitten.com/g/200/300">
<img class="positioned" src ="http://placekitten.com/g/400/500">
</div>
<div>
<img class="not-positioned" src="http://placekitten.com/g/200/300">
<img class="positioned" src ="http://placekitten.com/g/400/500">
</div>
您会注意到，这是根据规范工作的（尽管z-index 值较高，但.not-positioned图像位于图像后面），但我很难理解这种行为的基本原理。.positioned.not-positioned