标签: z-index

我已经为移动网站创建了一个菜单,当你点击菜单按钮时菜单幻灯片打开,这就是页面;

http://www.roadtotheweb.com/m.about.html

唯一的问题是在IE和Windows手机中,菜单不是最顶层的元素,因此在对象后面滑动.

我试图改变z-index,位置类型,hasLayout无济于事.

我将不胜感激任何帮助.

Ĵ

我一直在寻找一种方法来添加z-index到边框但似乎找不到一个所以我想我会问这里.

假设我有父div的div.父项有一个边框,我希望该边框与子div重叠,但我不希望父项重叠它.

我今天遇到了一个小问题:我有一个JS下拉菜单,当我插入一个GoogleMap时......菜单显示在谷歌地图后面...有关如何机会谷歌地图的z索引的任何想法？

谢谢!

此代码适用于我尝试过的所有其他浏览器,IE8除外.

IE8似乎忽略了z-index - 弹出窗口变成了pop-under.

它位于正确的位置,只是缩略图下方的渲染.

任何人？

谢谢!

HTML:

<a class="thumbnail" href="#thumb">
    <img src="comic_a3_thumb.jpg" height="300" width="212" border="0"
         style="float:right; margin-top:10px;margin-bottom:10px;"
         alt="description" />
    <span>
        <img src="/images/comic_a3_popup.jpg" />
    </span>
</a>

CSS:

.thumbnail{
    position: relative;
    z-index: 0;
}

.thumbnail:hover{
    background-color: transparent;
    z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: 0px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
}

.thumbnail:hover span{ /*CSS for …

在兼容模式下运行,下面的日历将在下面的文本框后面呈现.IE8显示我需要它的日历.

我的CSS

.MyCalendar .ajax__calendar_container 
{
border:1px solid #7F9DB9; 
background-color: #ffffff; 
z-index : 1004 ;   
width:190px;
}

覆盖日历的文本框没有设置任何z-index,尽管我已经尝试在我的服务器端代码中将z-index设置为-1,如果我检测到IE7无效的话.有什么建议？ alt text http://img62.imageshack.us/img62/7127/overlay.gif

我希望我的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;
}

这非常令人沮丧......

http://jsfiddle.net/RRnm8/

适用于所有浏览器,IE8除外......

它应该显示如下:

正确的版本http://f.cl.ly/items/4410273m1G1m1O2U0K0a/Screen%20shot%202011-04-04%20at%2016.40.54.png

但是在IE8中你会得到这个:'(

错误的版本http://f.cl.ly/items/2e351L0G3y2H1O1g1a1L/Screen%20shot%202011-04-04%20at%2016.41.41.png

那么问题是如何让它在IE8中正常工作？

请在jsfiddle提供答案作为一个真实的例子......

这个伙伴有完全相同的问题.他没有答应,但是这个这显然是不行的,对于工作的例子,因此我的各种要求证明它的jsfiddle

提前致谢 :)

当静态定位时,:: before伪元素在孩子的内容之前堆叠(z-index),但是在孩子的背景之后.任何人都可以解释为什么甚至如何发生这种情况,或者这是否是所有主流浏览器都存在的问题？

<style>
div { background-color:yellow; width:400px; }
div::before { background-color:red; content:"div::before"; }
div::after { background-color:green; content:"div::after"; }
div p { background-color:blue; color:white; margin:-15px 0; padding:0; }
</style>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed tellus sed tellus sodales hendrerit tristique et elit.</p>
</div>

http://jsfiddle.net/funkyscript/ALrgf/

我在一个相对定位的元素中有一个固定的位置元素,就我而言,position: relative元素不应该对它有任何影响position: fixed(固定元素相对于窗口定位,对吧？).

但是,固定元素z-index似乎是由它的父级继承的,它的z-index不能高于其父级的z-index.

我希望我有意义吗？下面是我正在谈论的HTML示例:

.outer { 
    position: relative; 
    z-index: 2; 
}
.inner { 
    background: #fff; 
    left: 50px; 
    position: fixed; 
    top: 40px; 
    z-index: 1000000; 
}

.fade { 
    background: #555; 
    bottom: 0; 
    left: 0; 
    opacity: 0.5; 
    position: fixed; 
    right: 0; 
    top: 0; 
    z-index: 3; 
}

<div class="outer">
    <div class="inner">testing testing</div>
</div>
<div class="fade"></div>

如果您更改以下内容:

.outer { position: relative; z-index: 4; }

然后.inner元素出现在淡入淡出元素的前面.

我发现这种行为非常奇怪...有没有办法在不移动.innerdiv或改变div的CSS的情况下解决这个问题.outer？

以上代码示例的小提琴:

http://jsfiddle.net/n2Kq5/

http://jsfiddle.net/U8Jem/1/

根据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 { …