标签: z-index
如何强制css边框显示在分层页面上？
我正在尝试用html编写Box和Whiskers图.问题是,我有一个div的边框(如Box中),但是当覆盖包含带状彩色图像的前一层时,这些边框会消失.如果我可以避免使用背景图像(或颜色),则首选.
html是:
<table cellspacing="0" cellpadding="0" id="BoxAndWhiskers" width="100%">
<tr class="graphArea">
<td><div class="graphColors"><img src="ReadingColorScale.png" width="100%" height="250" alt="" /></div>
<div class="graphBoxes"><img src="black.gif" width="2" height="50" alt="" class="Whisker" /><div class="graphBox"><img src="black.gif" width="100%" height="2" alt="" style="padding-top: 10px; padding-bottom: 10px;" /></div><img src="black.gif" width="2" height="50" alt="" class="Whisker" /></div></td>
</tr>
</table>
而css是:
table#BoxAndWhiskers tr.graphArea td {
width: 33%;
}
table#BoxAndWhiskers tr.graphArea td div.graphBoxes {
z-index: 1;
margin-top: -250px;
}
table#BoxAndWhiskers tr.graphArea td div.graphBoxes img.Whisker {
display: block;
margin-left: auto;
margin-right: auto;
}
table#BoxAndWhiskers tr.graphArea td div.graphBoxes div.graphBox {
margin: …6
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
用z-index交换非兄弟姐妹
我正在尝试让侧边栏菜单与内容重叠div,其中活动菜单项出现在其上div,非活动项目将显示在下面.a ul和a之间的交点div很小,但交错效应会产生深度错觉.
据我所知,z-index这只适用于兄弟元素.所以以下方法不起作用:
#menu {z-index:0}
#menu li.active {z-index:2}
#content {z-index:1}
<ul id="menu">
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div id="content">Side content</div>
是否有一个很好的方法来做到这一点,而不必使每个菜单项div在同一水平上#content？
6
推荐指数
推荐指数
1
解决办法
解决办法
6621
查看次数
查看次数
有没有办法解雇忽略z-index的事件？
如果我有这样的事情:
有没有办法在BOTH div上触发mouseover事件？
编辑:对不起所有..我试图简化这个问题所以很清楚理解,我忘了提到我有超过100个这样的div,所以可能这些解决方案不起作用.我要看看我是否可以对它们进行调整.非常感谢大家.
6
推荐指数
推荐指数
1
解决办法
解决办法
2902
查看次数
查看次数
使用jQuery更改重叠图像z-index
我有三个矩形图像重叠在一条对角线内,第一个在左上角完全可见,第二个在中央部分隐藏在第一个,最后一个在右下角部分隐藏在第二个.我想要点击的图像在其他图像之上.我试图通过使用jQuery操纵z-index来实现这一点,但它似乎不起作用.实际上看起来jQuery甚至都没有得到认可.
这是我的测试代码:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
$(document).ready(function () {
$('#launch').click(function () {
alert('Ok');
});
$('.bottom-pic').click(function () {
$(this).css('z-index' : '1');
$('.bottom-pic').not(this).css('z-index' : '0');
});
});
</script>
<style type="text/css">
#pictures {
width: 650px;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 50px;
position: relative;
}
#top {
top: 0;
left: 0;
position: absolute;
z-index: 1;
}
#center {
top: 60px;
left: 200px;
position: absolute;
z-index: 1;
}
#bottom {
top: 150px;
left: 400px;
position: absolute;
z-index: 0;
}
</style> …6
推荐指数
推荐指数
1
解决办法
解决办法
2621
查看次数
查看次数
修改ItemsControl中项目的ZIndex
这是我的ItemsControl的代码,当鼠标移过时放大项目.
我没有设法增加当前缩放项目的ZIndex以将其放在其他项目上.
<ItemsControl ItemsSource="{Binding Path=Value}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}"
RenderTransformOrigin="0.5 0.5">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1.5"
ScaleY="1.5" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
我试图在触发器中直接更改ZIndex,但它不起作用.
我似乎需要更改ContentPresenter中的ZIndex,它是VisualTree中TextBlock的Parent,而不是直接在TextBlock中.
<Setter Property="Panel.ZIndex" Value="99" />
所以我尝试在ContentPresenter中更改ZIndex,但它仍然不起作用
<ItemsControl.ItemContainerStyle>
<Style TargetType="{x:Type ContentPresenter}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Panel.ZIndex" Value="99" />
</Trigger>
</Style.Triggers>
</Style>
</ItemsControl.ItemContainerStyle>
有谁知道它是如何工作的？
6
推荐指数
推荐指数
1
解决办法
解决办法
6804
查看次数
查看次数
<div>元素不是Safari Windows中的顶层
我有<div>元素显示弹出消息.我已经设置z-index:1000并添加,<iframe>但div元素仍未显示在Safari浏览器中的直播视频(嵌入插件)之上.我使用Chrome和Firefox,两者都有效,但它在Safari Windows中无法运行.
这是我在小提琴中的代码.
<BODY style="background:transparent">
<div style="position:relative; z-index:0;">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180">
<param name="wmode" value="transparent"></param>
<embed height="180" width="240" align="left" src="xxxx.avi" autoplay="false" controller="true" wmode="transparent"></embed>
</object>
<object>
<param name="wmode" value="transparent"></param>
<param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="240" height="180"></embed>
</object>
</div>
<div id="draggable">
<div class="drag">
<p>Drag me around!! Drag me around!!</p>
<p>Drag me around!! Drag me around!!</p>
<p>Drag me around!! Drag me around!!</p>
</div>
<iframe class="frame"></iframe>
</div> …6
推荐指数
推荐指数
1
解决办法
解决办法
1454
查看次数
查看次数
D3强制布局:链接和节点--- z-index(？)
D3:节点和链接之间的问题
我创建了以下jsfiddle以了解我正在尝试实现的目标:
我希望节点结束(？)链接...
请帮我.对不起我的英文:)
脚本看起来像这样:
function myGraph(el) {
this.addNode = function (id) {
nodes.push({ "id": id });
update();
}
this.removeNode = function (id) {
var i = 0;
var n = findNode(id);
while (i < links.length) {
if ((links[i]['source'] == n) || (links[i]['target'] == n)) links.splice(i, 1);
else i++;
}
nodes.splice(findNodeIndex(id), 1);
update();
}
this.addLink = function (source, target) {
links.push({ "source": findNode(source), "target": findNode(target) });
update();
}
var findNode = function (id) {
for (var i in …6
推荐指数
推荐指数
1
解决办法
解决办法
3297
查看次数
查看次数
为什么webkit过滤器上的堆叠顺序更改悬停？
在应用webkit过滤器时,我注意到堆叠顺序存在一个奇怪的问题.为什么当我将鼠标悬停在图像上时堆叠顺序会发生变化？
我宁愿不必使用z-indexing来解决这个问题,因为它会破坏其他网站元素.
这是我的JSFiddle http://jsfiddle.net/r13ycy1p/
请原谅荷马,我只需要一张图片.
编辑:如何反转效果以阻止绝对位置div被隐藏？
这是我的HTML
<ul>
<li>
<a href="#">
<div class="slide-content">
<div class="slide-title">
<h1>hello world</h1>
</div>
<div class="slide-desc">
<p>a description about something</p>
</div>
</div>
<img src="http://img4.wikia.nocookie.net/__cb20130920142351/simpsons/images/e/e9/Pic_1187696292_8.jpg"/>
</a>
</li>
</ul>
CSS
li {
list-style:none;
}
.slide-content {
position:absolute;
color:red;
top:50px;
}
li a:hover img{
-webkit-filter: grayscale(100%); /* For Webkit browsers */
}
6
推荐指数
推荐指数
1
解决办法
解决办法
2073
查看次数
查看次数
如何正确定位css元素？
我正在做一个基于noUi Slider的滑块.试图实现如此说"优雅"的解决方案.因为我的ui手柄很大,所以我的ui底座略大,底座有额外的值.但是这些值是不允许的,句柄会跳回到允许的值.我决定将加号和减号按钮放在限制值的位置.
但问题是我无法达到这样的效果:当你将控制符号移动到控制符号(正/负)时,它们会隐藏在句柄后面.就我而言,他们仍处于领先地位.我无法解决这个问题.
一些帮助/建议会很棒.
这是我的代码(样式在JSFiddle上):
$(document).ready(function(){
var sliders = document.getElementById('red'),
input = document.getElementById('handle'),
sliderPlus = document.getElementById('slider-amount-plus'),
sliderMinus = document.getElementById('slider-amount-minus'),
termCur = 500;
noUiSlider.create(sliders, {
start: termCur,
step: 50,
connect: "lower",
range: {
'min': 0,
'max': 1100
},
pips: {
mode: 'values',
values: [100, 500, 1000],
density: 4.5
}
});
$('<div class="value">' + termCur + ' z?' + '</div>').appendTo($('.noUi-handle', sliders));
sliders.noUiSlider.on('change', function ( values, handle ) {
if ( values[handle] < 100 ) {
sliders.noUiSlider.set(100);
} else if ( values[handle] > …6
推荐指数
推荐指数
1
解决办法
解决办法
444
查看次数
查看次数
使用z-index将div高于另一个div
我想要在div1上面div2.我尝试z-index但它不起作用.
我试过这段代码:
div {
width: 100px;
height: 100px;
}
.div1 {
background: red;
z-index: 1;
}
.div2 {
background: blue;
margin-top: -15vh;
z-index: 2
}<div class="div1"></div>
<div class="div2"></div>6
推荐指数
推荐指数
2
解决办法
解决办法
8380
查看次数
查看次数
标签 统计
z-index ×10
css ×6
html ×4
jquery ×3
border ×1
css-position ×1
css3 ×1
d3.js ×1
filter ×1
force-layout ×1
html-object ×1
itemscontrol ×1
safari ×1
webkit ×1
wpf ×1