标签: z-index
z-index不像我期望的那样表现
所以我得到了这个,大致:
<div id="A">
<ul>
<li id="B">foo</li>
</ul>
</div>
<div id="C">
...
</div>
这些定位使得B和C重叠.
A具有z-index的90,B具有z-index的92,和C具有z-index的91.但是C出现在B面前.我做错了什么？(如果需要更多细节,请告诉我.)
推荐指数
解决办法
查看次数
我们如何以编程方式更改silverlight控件的zindex？
我以编程方式在堆栈面板中添加了一些控件.我想要做的是,我希望将此stackpanel中的一个控件放在另一个控件上.具体来说,我想在此堆栈面板中的图像上放置按钮.我在c#codebehind中找不到zindex属性.虽然看起来很简单,但我无法找到解决这个问题的任何线索.有人请......
推荐指数
解决办法
查看次数
Safari和Chrome CSS表行定位z-index问题(适用于Firefox)
我有一个问题似乎只影响Safari和Chrome(又名WebKit).我有一个覆盖整个屏幕的覆盖图,以及两个我希望显示在覆盖图顶部的表格行.页面上的其他所有内容都应显示在叠加层下方.
问题是Safari只在顶部显示一个表行.Firefox正确显示两者.我似乎无法在Safari中找到此问题的根本原因,但我知道我不是唯一一个拥有"在Firefox中运行的Safari定位问题"的人.
我应该怎么做才能在Firefox和Safari/Chrome中使用它？
<body>
<style>
.ui-widget-overlay {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
}
</style>
<table>
<tr style="position:relative; z-index:1000;">
<td>Displays on top in Firefox only</td>
</tr>
<tr>
<td>
<div style="position:relative; z-index:1000;">
Displays on top in both Safari and Firefox
</div>
<span class="ui-widget-overlay"></span>
</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
</table>
</body>
更新:显然上面的代码示例显示正确.但是,这只是一个样本.这不是实际的代码.HTML是相同的,但我使用JavaScript动态应用样式.
也许问题在于jQuery？我正在使用此行将定位添加到第一个表行:
$(firstTableRow).css('position', 'relative').css('z-index', '1000');
在Firefox中(使用Firebug)我可以看到正在应用样式,但是在Safari中(使用Web Inspector)它表示该表行的"计算样式"静态定位,其z-index为auto,即使"style attribute"样式表示位置是相对的,z-index是1000.
推荐指数
解决办法
查看次数
jQuery - 更改除了'this'之外的所有div的css
我需要它,所以当我点击类'mydiv'的div时,该类的所有div都有一个z-index为1,除了我点击的div作为z-index为2.
再次单击div需要将其z-index更改回1.
到目前为止,我想出了以下内容:
$('.mydiv').toggle(function() {
$('.mydiv').css('z-index','1');
$(this).css('z-index','2');
}, function() {
$(this).css('z-index','1');
});
如果你点击一个div然后再次点击它(将z-index返回到1),然后点击另一个它就可以了.
但是,如果单击div,然后单击另一个div而不单击第一个div(将其切换回z-index 1),有时它会起作用,有时它不会执行任何操作.我假设问题在我的代码的第一部分,因为这:
$('.mydiv').css('z-index','1');
在此之前并不总是运行:
$(this).css('z-index','2');
这是问题,如果是,我该如何解决这个问题？谢谢
更新 - 很抱歉没有考虑到这一点,但我在这里简化了我的问题,实际的页面需要有css定位动画.因此,当您单击div时,它会以平滑的动画移动.我认为这意味着我不能通过切换一个类来改变css.谢谢
-
更新2 - 我以为我有这个工作,然后我测试了IE8和7. IE9是可以的(以及我测试的所有其他浏览器)但IE7和IE8使所有图像跳转到你点击其中任何一个.这是演示(所有css和jQuery都在页面内):
http://smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm
这是jQuery:
$(".image-div").click(function () {
var divRefTwo = $(".image-div").not(this);
$(".image-div").not(this).animate({
width: '250px',
left: '0px',
marginRight: '0px',
backgroundPosition: '-125px'
}, 400, function() {
$(divRefTwo).css('z-index','1');
});
if ($(this).css('z-index') == 1) {
$(this).css('z-index','2');
$(this).animate({
width: '500px',
left: '-125px',
marginRight: '-250px',
backgroundPosition: '0px'
}, 500, function() {
//
});
}
else {
var divRef = this;
$(this).animate({ …推荐指数
解决办法
查看次数
Z-index:如何使嵌套元素出现在其父元素下面
这个小提琴应该证明这个问题:
我希望子菜单显示在父菜单下面.我当时正在寻求用JavaScript扩展这个以在父li元素的悬停下从下面滑动菜单.
没有关于JavaScript的讨论,但无法弄清楚如何设置元素的样式以实现所需的分层.
推荐指数
解决办法
查看次数
AndEngine-在其父母身后绘制精灵的孩子
我正在尝试将精灵附加到另一个精灵并将其附加到其父级后面.
这通常很容易,我之前在我的代码中只有一个 - 但由于某种原因,在一次实例中,它不起作用.
该过程通常是将父级的Z索引设置为某个数字,并为其子级分配较低的Z索引.这是代码,其中rect是父级,icon并附加到它; 两者都附加到父实体.然后我尝试了sortChildren()所有方法(rect,父实体,甚至是场景本身); 我知道这不是很有效,但我只是想知道是否有东西可以抓住.它没有.icon仍被吸引rect:
for (int i=0; i<levelsList.size(); i++) {
rect = new Sprite(i*(width+padding),
0,
width,
height,
levelSelectorSquareRed,
this.getVertexBufferObjectManager());
icon = new Sprite((rect.getWidth()-innerWidth)/2f,
(rect.getHeight()-innerHeight)/2f,
innerWidth,
innerHeight,
levelIcons.get(i),
this.getVertexBufferObjectManager());
rect.setZIndex(1);
icon.setZIndex(0);
rect.attachChild(icon);
rect.sortChildren();
levelSquares.attachChild(rect);
}
levelSquares.setPosition(0, (CAMERA_HEIGHT-height)/2f);
levelSquares.sortChildren();
levelSelectorScene.attachChild(levelSquares);
levelSelectorScene.sortChildren();
从逻辑上讲,这应该是矫枉过正并让它运作,但它不是/我错过了什么？
谢谢
推荐指数
解决办法
查看次数
Z-index:make元素位于其父级的兄弟之下
想象一下这个DOM:
<header>
<h1> header </h1>
<!-- other elements -->
<nav>
nav
</nav>
</header>
<div>
content
</div>
标题和导航都定位为fixed.内容div定位为relative.我需要按此顺序(从上到下)创建一个带有z-index的堆栈:
- 标题*:不是(nav)
- 内容
- 导航
我很难将导航放在底部(换句话说,在其父母的兄弟之下).我认为所有头衔的孩子都不得不在顶部或在其兄弟之下......这是对的吗？如果是这样,这种情况是否有解决方法？
推荐指数
解决办法
查看次数
CSS过渡和z-index冲突
对于新的网页设计，我试图通过CSS过渡和z-index控制两个50％宽度的图层，但是似乎存在冲突：z-index似乎太慢了。正如您在小提琴中看到的那样，悬停时右侧滑块div后面隐藏着白色框，直到转换完成为止。有没有一种替代方案可以更快地起作用？还是有其他方法可以做到？任何帮助将非常感激！
这是我的CSS：
body {
background:black;
}
div {
-webkit-transition:opacity 0.6s ease, width 0.6s ease;
transition:opacity 0.6s ease, width 0.6s ease;
}
.slide {
position:absolute;
top:0;
bottom:0;
width:50%;
-webkit-transform:skew(-15deg);
-moz-transform:skew(-15deg);
-ms-transform:skew(-15deg);
-o-transform:skew(-15deg);
transform:skew(-15deg);
z-index:2;
}
.slide:hover {
width:60%;
z-index:3;
}
.slide#left {
left:0;
}
.slide#right {
right:0;
}
.wrap {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.inner {
width:100%;
height:100%;
-webkit-transform:skew(15deg) scale(1.5);
transform:skew(15deg) scale(1.5);
opacity:0.5;
position:absolute;
}
.inner:hover {
opacity:1;
}
.inner#left {
background:url(//savado.nl/new/key.jpg) no-repeat center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-ms-background-size:cover;
-o-background-size:cover;
background-size:cover; …推荐指数
解决办法
查看次数
Cesium DataSourceCollection图层排序
我有多个GeoJsonDataSource对象要放在铯地球仪上。问题是，如果它们重叠，则会出现一些Z轴战斗问题，并且无法调整它们的顺序。
有没有一种方法可以指定DataSource对象的顺序DataSourceCollection？
例如，我想使用以下代码在红色多边形的顶部放置绿色多边形：
var viewer = new Cesium.Viewer('cesiumContainer');
var red = Cesium.GeoJsonDataSource.load('map1.geojson', {
fill: new Cesium.Color(1, 0, 0, 1.0)
});
var green = Cesium.GeoJsonDataSource.load('map2.geojson', {
fill: new Cesium.Color(0, 1, 0, 1.0)
});
viewer.dataSources.add(red);
viewer.dataSources.add(green);
但是，结果看起来像这样：
我注意到，如果将alpha参数调整为小于1.0，则可以修复z冲突，但是顺序仍然无法解决。
推荐指数
解决办法
查看次数
不能用z-index将一个div重叠在另一个div上
我想让我.dynamic-tooltip覆盖我的.static-tooltip.我的静态工具提示必须隐藏.
但我无法这样做z-index.请告诉我哪里出错了.
请看看我的代码. https://jsfiddle.net/x883m3hg/
<div class = "static-tooltip">
<div class = "tooltip-container">
<div class = "item-key">
Static tooltip Key
</div>
<div class = "item-value">
Static tooltip Value
</div>
</div>
</div>
<div class = "dynamic-tooltip">
<div class = "tooltip-container">
<div class = "item-key">
Dynamic tooltip Key
</div>
<div class = "item-value">
Dynamic tooltip value
</div>
</div>
</div>
.static-tooltip{
position:relative;
z-index:1;
width:100%;
height: 30px;
}
.dynamic-tooltip{
position:absolute;
z-index:2;
top:3px;
width: 100%;
height:30px
}
提前致谢.
推荐指数
解决办法
查看次数
标签 统计
z-index ×10
css ×7
html ×3
css3 ×2
andengine ×1
android ×1
cesium ×1
firefox ×1
geojson ×1
gis ×1
javascript ×1
jquery ×1
nested ×1
safari ×1
silverlight ×1
sprite ×1
stackpanel ×1
transitions ×1