我有两个嵌套的CSS元素.我需要让父元素位于子元素的顶部,即z轴的上方.仅设置z-index是不够的.
我无法在子项上设置负z-index,它会将其设置为我实际页面上的页面容器下方.这是唯一的方法吗？
.parent {
position: relative;
width: 750px;
height: 7150px;
background: red;
border: solid 1px #000;
z-index: 1;
}
.child {
position: absolute;
background-color: blue;
z-index: 0;
color: white;
top: 0;
}
.wrapper
{
position: relative;
background: green;
z-index: 10;
}<div class="wrapper">
<div class="parent">
parent parent
<div class="child">
child child child
</div>
</div>
</div>我无法弄清楚如何使用前面的图像CSS.我已经尝试将z-index设置为1000并定位到相对位置,但它仍然失败.
这是一个例子 -
#header {
background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
height: 128px;
}
.content {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-collapse: collapse;
}
.td-main {
text-align: center;
padding: 80px 10px 80px 10px;
border: 1px solid #A02422;
background: #ABABAB;
}<body>
<div id="header">
<div id="header-inner">
<table class="content">
<col width="400px" />
<tr>
<td>
<table class="content">
<col width="400px" />
<tr>
<td>
<div class="logo-class"></div>
</td>
</tr>
<tr>
<td id="menu"></td>
</tr> …我已经实现了一个动态显示搜索选项的弹出框.我希望该框能够"浮动"在所有网站内容之上.目前,当显示该框时,它取代了它下面的所有内容并且看起来很糟糕.
我相信我已经尝试将盒子div的z-index设置为高于剩余页面内容的z-index,但仍然没有运气.
我的#primaryNavdiv 上有一个盒子阴影.不幸的是,阴影被以下#page元素的背景覆盖/隐藏.
我试图将z-index设置为100 #primaryNav,将z-index设置为-100到#page,但这并不能解决我的问题.
我有什么想法我做错了吗？
使用transform属性,z-index被取消并出现在前面.(当注释掉-webkit-transform时,z-index在下面的代码中正常工作)
.test {
width: 150px;
height: 40px;
margin: 30px;
line-height: 40px;
position: relative;
background: white;
-webkit-transform: rotate(10deg);
}
.test:after {
width: 100px;
height: 35px;
content: "";
position: absolute;
top: 0;
right: 2px;
-webkit-box-shadow: 0 5px 5px #999;
/* Safari and Chrome */
-webkit-transform: rotate(3deg);
/* Safari and Chrome */
transform: rotate(3deg);
z-index: -1;
}<html>
<head>
<title>transform</title>
<link rel="stylesheet" type="text/css" href="transformtest.css">
</head>
<body>
<div class="test">z-index is canceled.</div>
</body>
</html>transform和z-index如何协同工作？
假设我有这个代码:
<div class="parent">
<div class="child">
Hello world
</div>
</div>
<div class="wholePage"></div>
这个jsFiddle:http://jsfiddle.net/ZjXMR/
现在,我需要<div class="child">在上面<div class="wholePage">但是在jsFiddle中你可以看到之前渲染的子元素<div class="wholePage">.
如果删除parent该类,position或z-index一切正常.这是我需要的正确行为:http://jsfiddle.net/ZjXMR/1/
如果有z-index或没有从页面删除任何东西我怎么能这样做？
为了将包含透明文本图像的div设置为我文档中的最高z-index,我选择了数字10,000,它解决了我的问题.
以前我猜过3号但是没有效果.
那么,是否有更科学的方法来确定哪个z-index高于所有其他元素？
我试图在Firebug中寻找这个指标但却找不到它.
CSS z-index属性是否有最大/最小可能值？
不同的浏览器是否有不同的最大/最小接受值？
浏览器如何处理高/低值？
我以为我曾经读过一个关于最大值的地方z-index.也许我错了.
提前致谢!
我无法z-index使用iframe包含IE8的pdf文件.它适用于谷歌浏览器.
示例(JSFiddle):
HTML
<div id="div-text">
<div id="shouldBeOnTop">my text that should be on top</div>
</div>
<div id="div-frame">
<iframe src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"/>
</div>
CSS
#div-text{
position:relative;
left:210px;
top:20px
}
#shouldBeOnTop{
position:relative;
right:60px;
background-color:red;
width:100px;
z-index:2;
}
#div-frame{
position:relative;
z-index:1;
}
我在页面顶部的固定导航栏中使用了twitter bootstrap下拉菜单.
这一切都很好但是在显示其他页面元素后面而不是在它们前面的下拉菜单项有问题.
如果我在页面上有任何东西position: relative(如jquery ui手风琴或谷歌图表),那么下面的菜单会显示在它后面.尝试更改z-indexdd菜单和导航栏,但没有任何区别.
我可以让菜单位于其他内容之上的唯一方法是将内容更改为position: fixed;OR z-index: -1; ,但这两种解决方案都会导致其他问题.
感谢您能给我的任何帮助.
我认为这可能是CSS定位的一些标准问题,我误解了,所以没有发布任何代码,但如果需要可以做.
谢谢.