标签: z-index

我正在创建一个基于CSS/XHTML表的日历的原型,最终将使用PHP为Simple Updates内容管理系统生成.我遇到了一个问题,即使用绝对定位来创建一个弹出窗口,该弹出窗口会在一天内显示所有事件,而这些事件不仅适合单元格.问题可以在这里看到:

http://sutest.bravehost.com/

如您所见,弹出窗口在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;">&nbsp;<img src="endr.png" alt="." /></li>
    </ul>
</div></td>

我正在使用列表项来"伪造"多日活动.这一天的li被设计为看到在IE 6和7中弹出窗口的条形图. …

Google Chrome正在错误地显示Flash视频的z-index.

在Firefox或Internet Explorer中查看http://maxusglobal.com/.

现在在Chrome中查看它.

页面顶部的大视频应该有一个z-indexed顶部的"预览"图像.它适用于Firefox和Internet Explorer,但不支持Google Chrome.

这似乎不是WebKit的东西,而是一个Chrome bug.

我已经尝试了所有的wmodes,(不透明,窗口和透明),但这并没有解决它.我也更改了Flash框的z-index,但它仍然无法正常工作.

在我的应用程序中,我可以打开几个相互重叠的div框.单击框时应将该框移动到顶部.完成此任务的最佳方法是什么？

我唯一能想到的是循环遍历所有框z-index值以获得最高值,然后将1加到该值并将其应用于单击的div.

对我有什么建议吗？

当我"全屏"一个元素(让我们说一个div)时,我无法获得任何其他元素(在全屏模式下).为什么会这样？我怎么能做到这一点？

相关:有没有办法在全屏HTML5 <video>上叠加<canvas>？

Z-index在Safari上无法正常呈现 - 但它在Chrome和Firefox上运行良好.我无法弄清楚Safari特有的bug是什么.

这是相关代码:

.flex-container{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        }

        .flex-item{
        margin-left: 14%;}


        #inner-ul2{
        margin-left: 70px;}


        #inner-navbar{
        z-index: 1;
        background-color: white;
        overflow: hidden;
        margin-top: 50px;
        box-shadow: 0px 10px 10px #444444;}

        .inner-buttons{
        background-color: white;
        overflow: hidden;
        color: black;
        font-family: Roboto;
        font-weight: 300;
        font-size: large;}

        .inner-buttons-left{
        overflow: hidden;
        margin-right: 45px;}

        .inner-buttons-right{
        overflow: hidden;
        margin-left: 40px;}


        #inner-logo{
        position:fixed;
        z-index: 2;
        display: inline-block;
        float: none;
        height: 100px;
        width: 120px;
        margin-top: -20px;
        margin-left: -25px;
        margin-right: auto;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        box-shadow: 0px 20px …

我的位置有问题：sticky 和 ​​z-index

我希望我在粘性元素中的模态被覆盖层覆盖。使用 position: relative 可以工作：模态在叠加层之前。但是当我使用 Sticky 时，模态位于覆盖层后面。

希望我的意思可以理解。这是示例：

.sticky {
    position: sticky; /* <-- dosen't work */
    /* position: relative; /* <-- work */
    top: 0;

    width: 100%;
    height: 200vh;
    background: red;
}

.modal {
    z-index: 1000;

    position: fixed; 
    margin: 0 auto;
    width: 200px;
    height: 200px;
    background: yellow;
    margin: 0 auto;
}

.overlay {
    z-index: 999;
    position: fixed;


    width: 100%;
    height: 100%;
    background: green;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.75;
}

<div class="overlay"></div>
<div …

今天，经过四个小时的调试，我很难学到了这个规则：

如果父级的z-index值为任何值，则无论您如何更改子级的CSS，父级元素都永远无法覆盖（堆叠在其子级元素之上）

我如何通过逻辑理解这种行为？规范在哪里覆盖？

代码（也在CodePen中）：

.container {
  width: 600px;
  height: 600px;
  background-color: salmon;
  position: relative;
  z-index: 99;
  margin-top: 20px;
  padding-top: 10px;
}

h1 {
  background-color: pink;
  position: relative;
  z-index: -1;
  font-family: monospace;
}

<div class="container">
  <h1>1. I can never be covered by parent if my z-index is positive.</h1>
  <h1>2. Even when my z-index is nagative, I still can never be covered if my parent has any z-index at all.</h1>
</div>

问题
我有一个自定义标签控件,使用与ViewModel绑定的Chrome形状标签.由于形状,边缘重叠一点.我有一个函数设置tabItem的ZIndex,TabControl_SelectionChanged它可以正常选择选项卡和拖放选项卡,但是当我通过中继命令添加或关闭选项卡时,我得到了不寻常的结果.有没有人有任何想法？

默认视图:

删除标签:

连续添加2个或更多Tab:

一次添加超过1个选项卡将不会重置其他最近添加的选项卡的zindex,因此它们会在右侧的选项卡后面,并且关闭选项卡无法正确呈现替换它的SelectedTab的ZIndex并且它显示在选项卡右侧.

用于设置ZIndex的代码

private void PrimaryTabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.Source is TabControl)
        {
            TabControl tabControl = sender as TabControl;
            ItemContainerGenerator icg = tabControl.ItemContainerGenerator;
            if (icg.Status == System.Windows.Controls.Primitives.GeneratorStatus.ContainersGenerated)
            {
                foreach (object o in tabControl.Items)
                {
                    UIElement tabItem = icg.ContainerFromItem(o) as UIElement;
                    Panel.SetZIndex(tabItem, (o == tabControl.SelectedItem ? 100 :
                        90 - tabControl.Items.IndexOf(o)));
                }
            }
        }
    }

通过使用断点,我可以看到它正确地将ZIndex设置为我想要的,但布局不显示更改.我知道有些变化是有效的,因为如果它们都没有工作,那么标签边缘将被颠倒(右边的标签将被绘制在左边的标签之上).单击选项卡将正确设置所有选项卡的zindex(包括应在顶部绘制的选项卡),拖放它们以重新排列它们也可以正确渲染(删除并重新插入选项卡项).我能想到的唯一区别是我使用MVVM设计模式和添加/关闭选项卡是中继命令的按钮.

有谁知道为什么会发生这种情况以及如何解决它？

ps我尝试在我的ViewModel中设置一个ZIndex并绑定到它,但是当通过relay命令添加/删除选项卡时会发生同样的事情.

可能重复:
iPad Safari mobile似乎忽略了html5视频元素的z-indexing位置

我正在使用BrightCove智能手机代码将HTML5视频标签写入页面.这段代码用视频标签替换了object标签,以便它可以在iphone和ipad上运行,仍然可以在不支持的浏览器中运行

我遇到的问题是这个动态写入标签的分层.它似乎不遵守z-index顺序,导致当有人滚过下拉列表时,我放在视频后面的视频上方的下拉菜单.

这个div

<div style="position: relative; z-index: 99;">123</div>

如上所示

<div style="position: fixed; z-index: 3000;">456</div>

当我在第一个div中分配z-index:98时一切都很好!如果需要,我可以提供更多代码.