我正在尝试使用position:relative来获取div以包含鼠标悬停时的其他div.不幸的是它只适用于最后一个div.如果将鼠标悬停在其他鼠标上,它们只会覆盖在它们之前声明的div.
代码在这里:http://jsfiddle.net/YuKaR/3/
绝对定位工作正常,但不幸的是我无法使用绝对定位这个特定的应用程序.
谁知道我做错了什么？感谢您的时间.
我需要一次显示2个对话框模态.由于第一个对话框的内容需要使用一些绝对定位和z索引,覆盖的z索引对我来说很重要.
我得到的问题是,如果我在z-index为300时显示第一个模态,则叠加获得301的z-index.如果我然后显示另一个z-index为500的模态,则新叠加获得z-如果我关闭两个模态并再次打开第一个模态,而不是获得z-index为301的叠加,则为503.
这是一些示例代码.
<html>
<head>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#modal').hide();
$('#success-message').hide();
$('#show-modal-button').click(function(){
$('#modal').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 400
});
});
$('#modal-button').click(function(){
$('#success-message').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 500
});
});
});
</script>
</head>
<body>
<input type="button" id="show-modal-button" value="show modal"/>
<div id="modal"> …所以这是我无法弄清楚Chrome的一个问题......
我有一个ul带有ul子菜单的兄弟菜单的菜单,即使我z-index设置为9999,这些项目也显示在任何动态JS内容背后,例如YouTube Chromeless播放器和Nivo Slider.
有谁知道这个解决方案是什么？
这是我想要做的:
创建绝对定位的全局"手势容器",宽度和高度100%,以及高于文档中所有其他元素的z索引.
这是我的问题:当我创建这个容器时,我绝对定位的元素阻止了绑定到它下面的所有内容的click事件.
$(document).ready(function() {
$(document).on('click touchstart', '.block', function() {
var $this = $(this);
if(!$this.hasClass("disabled")){
$this.addClass("disabled")
$this.openPopUp();
}
return false;
});
});
注意我正在使用jQuery 1.7.2中新的.on()调用,我将其设置为与.live()一样的功能.
为什么我的元素不接受我的点击？看起来我的手势区域正在阻止它,但有没有办法绕过它？
我有一个元素进入幻灯片放映,当幻灯片进来时,此元素使用jQuery UI效果explode显示.
$e.show('explode', {}, 1000);
当我第一次运行它时,我根本没有看到元素出现.所以我想"哦,它必须是z-index"并将元素的z-index设置为10并确保它已position定义.(幻灯片的z-index为5)
这使得图像在效果完成后显示出来.我把幻灯片隐藏起来进行测试,果然,动画发生在幻灯片后面,看起来更低了z-index.
为什么我不能在动画之后看到元素？
我在一个更大的容器中有两个不同的元素(div class ="").
我们称之为div class ="overlay_container"和div class ="title".div class ="overlay_container"有一个子类.image,它在悬停时在整个较大的容器上创建一个叠加层.
div class ="title"的z-index为10,000,位于.image之上,因此位于叠加层上方.不幸的是,当你将鼠标悬停在"标题"上时,下面的子类叠加图像会消失.
我知道问题显然是"标题"div正好在其他div上,因此悬停将由于z-index而消失.但是我该如何解决这个问题呢？如何制作它,以便当您将鼠标悬停在"标题"上时,仍然会出现.image叠加？
如果您的答案涉及jQuery,请告诉我在哪里放脚本(在/ head标签之前)？谢谢!
我创造了这个小提琴来说明我的问题:http://jsfiddle.net/AVxbd/
我有一个menu(#container),带有一些链接(#text1,#text2).我做了一个#highlighter元素来突出显示该人在特定时刻的页面链接.HTML:
<div id="container">
<div id="highlighter"></div>
<div id="text1">Text 1</div><div id="text2">Text 2</div>
</div>
JavaScript:
$('#highlighter')
.offset($('#text1').offset())
.width($('#text1').width()
);
$('#text1, #text2').click(function(){
$('#highlighter').animate({
top: $(this).offset().top,
left: $(this).offset().left,
width: $(this).width() + "px"
},300);
});
的问题是,在#highlighter元素被显示在所述#text1和#text2元素.那不是我想要的!
我试图用z-index解决这个问题:
#container { z-index: 1; }
#highlighter { z-index: 2; }
#text1, #text2 { z-index: 3; }
但是,这不起作用,正如你可以在小提琴中看到的那样.
我怎样才能让它发挥作用？我想让它看起来像#text1和#text2元素有一个橙色背景,但因为我希望荧光笔在宽度和位置动画,我不能只给这些元素一个背景本身.
我已经搜索过这个问题,并且知道IE8有使用伪标签渲染元素的怪癖,但无法找到我的问题的解决方案.我试图绝对定位一个元素并在其中添加一个伪:before元素,它必须位于其父元素之下.
使用:
.container:before {
z-index: -1;
}
使用Firefox和Chrome进行操作但不在IE上; 这是小提琴http://jsfiddle.net/WaTnn/
如何在IE8中将黄色元素定位在红色下面并且仍然将它的父级置于绝对位置？
我正在尝试使用Chosen插件和其他一些插件,如jQuery Layout和jqgrid
没有选择我的选择框看起来像这样:
http://i.stack.imgur.com/x8qQv.png
并选择:
http://i.stack.imgur.com/XlSMz.png
它与jQuery Layout重叠.
有没有办法让Chosen始终站在前面？
我玩了两个插件的不同CSS设置,但无济于事.帮助请弄清楚该怎么做.
HTML:
<div class="ui-layout-center"></div>
<div class="ui-layout-north">
<div style="width: 250px; position:relative; z-index:99999">
<select id="picker" style="width: 250px">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
</select>
</div>
</div>
<div class="ui-layout-south"></div>
<div class="ui-layout-east"></div>
<div class="ui-layout-west"></div>
jQuery的:
$('#picker').chosen();
$('body').layout(
{ applyDefaultStyles: true }
);
链接到JSFiddle:小提琴
以下代码(html&css)让我发疯... jsfiddle链接
如何使用z-index(或其他任何东西)让3个圆圈始终可见.蓝色的那个没问题,但黄色和红色隐藏了左边的圆圈.
在此先感谢您的帮助!
<div id="rSociaux" class="col-md-6 noSpace">
<a href="http://www.facebook.com/lesdieuxduvin" target="_blank" id="bg-fb" class="tile-share">
<div class="social-color-bg fb"></div>
<svg class="ontop" height="100" width="100">
<circle cx="50" cy="50" r="20" fill="blue" />
</svg>
</a>
<a href="http://www.twitter.com/lesdieuxduvin" target="_blank" class="tile-share">
<div class="social-color-bg twitter"></div>
<svg class="ontop" height="100" width="100">
<circle cx="50" cy="50" r="20" fill="yellow" />
</svg>
</a>
<a href="http://www.twitter.com/lesdieuxduvin" target="_blank" id="bg-li" class="tile-share">
<div class="social-color-bg linkedin"></div>
<svg class="ontop" height="100" width="100">
<circle id="svgLi" cx="50" cy="50" r="20" fill="red" />
</svg>
</a>
CSS:
#rSociaux {
background-color: #a55fa2;
}
.ontop {
position: relative;
z-index: 10; …z-index ×10
css ×8
jquery ×5
html ×4
css-position ×2
jquery-ui ×2
click ×1
dialog ×1
dynamic ×1
events ×1
javascript ×1
modal-dialog ×1
svg ×1