标签: z-index
如何使div在所有其他控件之上
我希望我的div显示在我放入100%宽度和高度的每一件事的顶部,它显示上面有很多contorl除了一些有css z-index和其他东西我试图把我的div z-index大数但但没有工作
{
width: 100%;
height: 100%;
top: 5px;
left: 0px;
background-color: #FFFFFF !important;
padding: 10px;
overflow: hidden;
visibility: visible;
display: block;
z-index: 500 !important;
position: relative;
}
推荐指数
解决办法
查看次数
Flexbox,z-index和position:static:为什么不工作？
根据flexbox规范:
..4.3.Flex项目Z-Ordering,...和
z-index除了auto创建堆叠上下文之外的值, 即使position是static.
所以,我认为z-index/ opacity应该像往常一样使用flexbox但是当我将它应用于这个HTML/CSS时它不起作用(我的目标是放在创建两个层.header之上.core):
.header {
opacity: 0.5;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-end;
}
.headerLeft {
z-index: inherit;
background-color: blue;
text-align: right;
align-self: stretch;
flex: 2 1 250px;
}
.headerCenter {
z-index: inherit;
background-color: red;
text-align: right;
align-self: stretch;
flex: 1 1 175px;
}
.headerRight {
z-index: inherit;
background-color: green;
text-align: right;
align-self: stretch;
flex: 1 1 100px;
}
.core { …推荐指数
解决办法
查看次数
如何在wpf中将项目带到前面？
我只是将两个网格放在一起.鉴于世界上的一个状态,我希望网格A位于顶部,给定另一个世界状态,我希望网格B位于顶部.在过去,我们可以调用grid.BringToFront(),但这不再存在,我无法找到任何方法来实现这一点.
我能想到的最好的,我需要创建自己的自定义类来允许这个功能,但这似乎是过去非常简单的过度杀手.
推荐指数
解决办法
查看次数
覆盖溢出:用z-index隐藏
我正在使用coda_bubble jquery插件,我需要让我的气泡在溢出隐藏的div中弹出.这是我的示例代码.
<html>
<head>
<title>Override overflow:hidden</title>
<link href="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script>
<script type="text/javascript">
$(function(){
opts = {
distances : [40,40],
leftShifts : [0,0],
bubbleTimes : [400,400],
hideDelays : [0,0],
bubbleWidths : [200,200],
bubbleImagesPath : "YOUR RELATIVE PATH TO SKIN FOLDER",
msieFix : true
};
$('.coda_bubble').codaBubble(opts);
});
</script>
<style type="text/css">
body{
margin:0;
padding:0;
}
#wrapper{
width:300px;
margin:200px auto;
}
.overflow{
width:120px;
height:80px;
overflow:hidden;
float:left;
}
.coda_bubble{
z-index:100;/****NOT WORKING*******/
}
</style>
</head> …推荐指数
解决办法
查看次数
如果容器上有溢出滚动,则Z-index在表内不起作用
我在将一个绝对div放在桌子外面时遇到了问题,我不是桌面布局的忠实粉丝,但我找到了一个带有桌面布局的现有项目.代码如下
<td colspan="2" align="right" style="padding-top:3px; padding-right:15px; padding-bottom:15px;" width="600px">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td height="37px" width="600px" style="background-image:url('P--IMG--P/welcomepanel/header.png'); background-repeat:no-repeat; background-position:bottom left;"><span class="heading" id="I--heading_text--I" style="padding-top:3px;"></span></td></tr>
<tr>
<td align='left' valign='middle' width="600px" height="522px" style="background-image:url('P--IMG--P/welcomepanel/middelblock_repeat.png'); background-repeat: repeat-y; padding-top:0px">
<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
[--C--comp--C--]
</div>
</td>
</tr>
<tr><td><img src="P--IMG--P/welcomepanel/middelblock_roundcorners.png"/></td></tr>
</table>
</td>
[--C--comp--C--]包含div内部图像的fckEditor的替换字符串在哪里,我已将div的z-index设置为10,但它不想离开表..并且它的位置是绝对的.
请让我知道我可能做错了什么.
我已经意识到问题来自td容器上的溢出滚动,如果你删除overflow-y:scroll它工作正常,但问题是我需要有溢出,因为在该td内有很多内容.我现在不知道该怎么办.:( ..有人请帮助一个兄弟!
我需要将小地图放在桌子外面并将大地图保留在桌子内,当你使用Jquery悬停在大地图上时,它会显示小图像,这是在fckeditor上加载的.我希望这有帮助..
推荐指数
解决办法
查看次数
如何在Youtube视频(z-index)上显示div？
我想在YouTube视频上展示一个div,但无法让它工作.我知道如果你设置wmode为transparent或opaque它应该工作,但我只是在使用<embed>or <object>标签时才看到这个工作.YouTube现在将视频嵌入其中,<iframe>当我尝试它时,它无法正常工作.这是我的代码的样子.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">@import "reset.css";</style>
<style type="text/css">
body {
background:#000;
font:62.5%/240% Helvetica, Arial, sans-serif;
overflow:hidden; /* To avoid showing a scrollbar */
}
div {
background:#f00;
position:absolute;
min-width:100%;
min-height:100px;
z-index:99;
}
</style>
</head>
<body>
<div></div>
<iframe width="100%" height="100%" src="http://www.youtube.com/v/8lVJV--SrGg&loop=1&autoplay=1&autohide=1&hd=1&modestbranding=1" frameborder="0" allowfullscreen></iframe>
</body>
</html>
推荐指数
解决办法
查看次数
ios更改子视图索引运行时
我打算用标签做一些菜单,
如果我有z索引的标签,我插入每个标签:
insertSubview:(UIView*)atIndex:(NSInteger)
然后按下它们顶部的按钮,我想更改顶部显示的标签
如何在运行时更改子视图索引？
谢谢!
推荐指数
解决办法
查看次数
WindowsFormsHost始终是WPF元素中最顶级的
如何设置z-index windowsformhost,它们并不总是位于WPF元素的顶部？
推荐指数
解决办法
查看次数
使用CKEditor的Bootstrap等于问题
我正在尝试创建一个包含CKEditor实例的Bootstrap模式,但是存在很多问题......
所以基本上这些字段都没有用,它们看起来不像,但我无法与它们互动.有没有人能解决这种奇怪的行为？
推荐指数
解决办法
查看次数
在IE 6和7中使用列表和表格进行绝对定位/ Z-Index时遇到问题
我正在创建一个基于CSS/XHTML表的日历的原型,最终将使用PHP为Simple Updates内容管理系统生成.我遇到了一个问题,即使用绝对定位来创建一个弹出窗口,该弹出窗口会在一天内显示所有事件,而这些事件不仅适合单元格.问题可以在这里看到:
如您所见,弹出窗口在IE7和IE6中的多日事件和日期下弹出.在弹出窗口上放置z-index修复了Firefox中的问题.我已经尝试在弹出窗口中放置各种z-index值,更改弹出窗口和相关元素的显示属性,以及许多其他不同的方法,但没有成功.
HTML如下:
<td valign="top"><div>
<div class="date">25</div>
<ul>
<li class="single"><a href="#">History</a></li>
<li class="single"><a href="#">Biology</a></li>
<li class="single"><a href="#">Computers</a></li>
<li class="single"><a href="#">POTCH</a></li>
<li class="single"><a href="#">Precal</a></li>
<li class="more"><a href="#">+3 More</a></li>
</ul>
<div class="popup">
<span class="close"><a href="#">X</a></span>
<ul>
<li class="single"><a href="#">History</a></li>
<li class="single"><a href="#">Biology</a></li>
<li class="single"><a href="#">Computers</a></li>
<li class="single"><a href="#">POTCH</a></li>
<li class="single"><a href="#">Precal</a></li>
<li class="single"><a href="#">Science PC</a></li>
<li class="single"><a href="#">Physics</a></li>
<li class="single"><a href="#">Construction</a></li>
</ul>
</div>
</div></td>
这是表格中带有硬编码弹出窗口的单元格.第一个列表包含正常的可见事件.包含第二个div的div是弹出窗口.它应该显示在多日活动中:
<td valign="top" class="blank"><div>
<div class="date">2</div>
<ul>
<li style="background-color:plum;"> <img src="endr.png" alt="." /></li>
</ul>
</div></td>
我正在使用列表项来"伪造"多日活动.这一天的li被设计为看到在IE 6和7中弹出窗口的条形图. …
推荐指数
解决办法
查看次数