标签: z-index

所以我和@Jamescoo几乎完全一样,但我认为我的问题来自于我已经定位了几个DIV以创建一个滑动导航面板.

这是我复制的确切设置:http: //jsfiddle.net/ZBQ8U/2/

奖励:如果您愿意,可以随意获取滑动面板的代码:)

z索引不应该冲突,它们的值会显示它们正确堆叠,但在视觉上它们不是.

点击"打开模态"按钮后,即可<div class="modal-backdrop fade in"></div>覆盖所有内容!(你必须重新运行代码才能重置它)

我不知道如何补救这个...任何想法？

我正在研究堆叠上下文并使用创建堆叠上下文的属性进行一些测试.

我做了几次测试,发现除了z-index当然,以下属性还会创建堆叠上下文:

• transform除了none;
• opacity除了1;
• 并且perspective.

是否有其他属性应用堆叠上下文？

我在为图像浮动div时遇到了麻烦.这是我想要完成的:

    .container {
       border: 1px solid #DDDDDD;
       width: 200px;
       height: 200px;
    }
    .tag {
       float: left;
       position: relative;
       left: 0px;
       top: 0px;
       z-index: 1000;
       background-color: #92AD40;
       padding: 5px;
       color: #FFFFFF;
       font-weight: bold;
    }

    <div class="container">
       <div class="tag">Featured</div>
       <img src="http://www.placehold.it/200x200">
    </div>

在这张图片中:

我希望"精选"框浮动在图像的顶部,但它似乎"清除"浮动并导致图像换行到下一行,就像它显示为块元素一样.不幸的是,我无法弄清楚我做错了什么.有任何想法吗？

我在JavaScript中编写了一个"弹出窗口",我遇到了一个有趣的事情:

弹出窗口下方的海军广场是可见的,即使我希望隐藏它.弹出广告后添加了弹出窗口,所以应该在顶部.

opacity海军广场的CSS 属性是0.3.从我的尝试来看,似乎间隔中的每个数字(0,1)都会产生相同的结果.如果我将其更改为1,则其行为与预期一致(即弹出窗口下方的部分被隐藏).

我试图将z-index属性设置10为方块和100弹出窗口,但它不会改变任何东西.

我错过了什么？为什么显示方块的一部分？

经测试的浏览器:

• Firefox 3.6.x.
• Chrome 4

我坚持看似与YouTube播放器的CSS/z索引冲突.在Windows XP下的Firefox 3中,请查看此页面:http://spokenword.org/program/21396单击"收集"按钮,并注意弹出的<div>显示在 YouTube播放器下方.在其他浏览器上,<div>显示在顶部.它的z-index值为999999.我尝试将包含播放器的<object>元素的z-index设置为较低的值,但这不起作用.知道如何让弹出窗口出现在播放器上吗？

我有许多具有不同z-index的div元素.我想在这些div中找到最高的z-index - 我怎样才能实现它？

CSS:

#layer-1 { z-index: 1 }
#layer-2 { z-index: 2 }
#layer-3 { z-index: 3 }
#layer-4 { z-index: 4 }

HTML:

<div id="layer-1">layer-1</div>
<div id="layer-2">layer-2</div>
<div id="layer-3">layer-3</div>
<div id="layer-4">layer-4</div>

我不认为这条线可以找到最高的z指数.

var index_highest = parseInt($("div").css("zIndex"));
// returns 10000

我正试图找到以下问题的答案:

元素的z-index样式是其绝对堆栈顺序,还是相对于其父级的堆栈顺序？

例如,假设我有以下代码:

<div style="z-index:-100">
    <div id="dHello" style="z-index:200">Hello World</div>
</div>

<div id="dDomination" style="z-index:100">I Dominate!</div>

哪一个会在前面 - #dHello,还是#dDomination？

这仅仅是为了举例.我在多个地方试过这个,结果似乎有所不同.我看到是否有人知道一个权威的解决来源:

1)关于z-index的实际标准是什么(具体是关于这个主题)？2)各个浏览器的实际实现方式有何不同？

谢谢!

我的z-index和我的代码存在严重问题.我想在每一行都有一个弹出窗口并相对于该行定位.所以我创建了这段代码:

<div class="level1">
    <div class="level2">
        <input type="text" value="test1" />
        <div class="popup">test1</div>
    </div>
    <div class="level2">
        <input type="text" value="test2" />
        <div class="popup">test2</div>
    </div>
</div>

与te以下风格

.level1
{
    position:relative;
    z-index:2;
}
.level2
{
    position:relative;   
    z-index:3;
}
.popup
{
    position:absolute;
    left:0px;
    top:10px;
    width:100px;
    height:100px;
    background:yellow;
    z-index:4;
}

我知道我做错了什么,但我找不到我的愚蠢.

有没有办法在操作栏上呈现视图？我想创建一个小的提示框,将用户指向操作栏中的项目.我知道Toast具有设定视图的a将呈现在操作栏上方.有谁知道如何用视图做到这一点？

我已经尝试使用FrameLayout与layout_gravity="top"和膨胀视图,然后将其添加到运行活动的布局.

我提前感谢你.

编辑:这是我在想的图像:

编辑:也许需要更多细节.我正在寻找一种方法,或者找出是否甚至可以将视图添加到活动的视图层次结构中,以便最后呈现它.

与CSS类似,我希望此特定视图(图像中的蓝色浮动框)具有更高的z-index顺序,以便它将在活动中的Action Bar区域上呈现.视图与Action Bar无关,它只是简单地绘制在它上面.

我在现有控制器的顶部堆叠了一个UIView,以创建一个渐变层.但是,当我加载视图时,新的UIView(自然地)就在所有内容之上.

相关守则:

class ViewController: UIViewController {

    @IBOutlet weak var myGradientView: GradientView!

    override func viewDidLoad() {
        super.viewDidLoad()            
    }

    override func viewDidLayoutSubviews() {
        self.myGradientView.gradientWithColors(UIColor.whiteColor(), UIColor.blueColor())
    }
}

我做了一些搜索,我在Objective-C中找到了一个解释使用的答案:

[parentView bringSubviewToFront:view];

我不知道Objective-c并且对Swift来说是相当新的,如果有人可以对此有所启发,我会很感激.

我的问题:

如何在Swift中更改UIView的z索引或堆栈顺序？