标签: z-index

对于我的生活,我无法让我的Superfish菜单停止隐藏在IE 7中的jQuery UI选项卡后面.我已经阅读了那里的文档,尝试更改z-index值并尝试了bgIframe插件,虽然我不确定是否我正确地实现它(在下面的例子中省略了,使用Supersubs).

这是我用于Superfish的Javascript - 使用Supersubs插件:

 $(document).ready(function() { 
                        $("ul.sf-menu").supersubs({ 
                        minWidth:    12,   // minimum width of sub-menus in em units 
                        maxWidth:    27,   // maximum width of sub-menus in em units 
                        extraWidth:  1     // extra width can ensure lines don't sometimes turn over 
                                   // due to slight rounding differences and font-family 
                    }).superfish({ 
                        delay:       1000,                            // one second delay on mouseout 
                        animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
                        speed:       'medium'                          // faster animation speed 
                    }); 
                    });

这是我的页面结构:

<div id="page-container">
        <div id="header"></div>
        <div id="nav-admin"> …

出于测试目的,让我们假设我画了两个茶壶glutSolidTeapot(),像这样:

glColor3f(1.0f, 0.0f, 0.0f); // Red teapot
glutWireTeapot(1.0f);

glColor3f(0.0f, 1.0f, 0.0f); // Green teapot
glTranslatef(0.0f, 0.0f, 3.0f);
glutWireTeapot(1.0f);

相机最初位于(x,y,z) = (0.0f, 0.0f, 5.0f)并且我正在看z = -1(这是相机位置#1).我相信你明白绿色茶壶是最接近相机的物体,红色茶壶就在后面.问题是红色的那个被画成绿色的那个,看起来不正确:

示例:http://i.stack.imgur.com/8WoEn.png

现在,如果我也移动相机(x,y,z) = (0.0f, 0.0f, -5.0f)并观察z = 1(这是相机位置#2),我会看到绿色前面的红色茶壶,这是正常的行为.红色现在是距离相机最近的物体,绿色物体位于红色物体后面.一切都好.

示例:http://i.stack.imgur.com/eJvPE.png

我知道这与订单有关,如果我切换上面的代码(绿色茶壶代码优先),它将解决相机位置#1中的问题,但问题现在将在相机位置#2中可见.

为什么会发生这种情况？如何保持其他对象后面的对象不被绘制在前面,或者根本不被绘制？

我有一个'层',我想给一个onclick.诀窍是我希望上面的图层上的元素在单击时不执行该操作.

我怎样才能做到这一点？

谢谢!

我在jQuery对话框中显示autosuggest框时遇到问题.无论如何,自动建议列表都会显示在对话框下方.我已经尝试将autosuggest的z-index属性设置为> 1004.但没有运气.

以下是截图.

这是我用来设置autosuggest列表样式的CSS类:

ul.as-list {
    position: absolute;
    list-style-type: none;
    margin: 2px 0 0 0;
    padding: 0;
    font-size: 14px;
    color: #000;
    font-family: "Lucida Grande", arial, sans-serif;
    background-color: #fff;
    background-color: rgba(255,255,255,0.95);
    box-shadow: 0 2px 12px #222;
    -webkit-box-shadow: 0 2px 12px #222;
    -moz-box-shadow: 0 2px 12px #222;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    z-index:6000;
}

li.as-result-item, li.as-message {
    margin: 0 0 0 0;
    padding: 5px 12px;
    background-color: transparent;
    border: 1px solid #fff;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    border-radius: 5px;
    -webkit-border-radius: 5px; …

我正在玩cocos2d并想知道我怎么能给精灵一个层深度意味着我怎样才能将精灵放在别人之上呢？

我在使用CSS z-index堆栈时遇到问题.

HTML:

<ul>
    <li><a href="#">Title 1</a></li>
    <li class="dropMenu"><a href="#">Title 2</a>
        <div class="containerDropDown">
            <ul class="menu">
                <li><a href="#">Lorem ipsum link</a></li>
                <li><a href="#">Lorem ipsum dolor sit met link amet ipsum link</a></li>
                <li><a href="#">Dolor sit amet link</a></li>
                <li><a href="#">Lorem ipsum link</a></li>
                <li><a href="#">Dolor sit amet link</a></li>
                <li><a href="#">Lorem ipsum link</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#">Title 3</a></li>
    <li><a href="#">Title 4</a></li>
    <li><a href="#">Title 5</a></li>
</ul>

CSS:

li.dropMenu {
    z-index:100;
}
.dropMenu:hover {   
    padding-bottom:9px;
    border:1px solid #575a5d;
    border-bottom:0;
    background-color:#434749;
    position:relative;
    -moz-box-shadow:0 0 5px #000;
    -webkit-box-shadow:0 0 …

我试图用jQuery UI对话框来解决z-index问题,类似于问题无法选择或取消选择jQuery UI模式对话框中的复选框,知道那里有错误报告.

因此,在尝试按照建议启动z-index时,我添加了以下代码:

$('#interface').click(function(evform){
  $('#interface').prop('z-index')=99999;
});

chrome和firefox console.log声明:

未捕获的ReferenceError:赋值中的左侧无效

但是,尽管出现错误,该复选框现在可以正常工作(每次都抛出控制台错误).如果我删除违规行,则该复选框变为"不可点击".我该如何正确编码呢？

我的HTML:

<div id="dialog" title="Loading...">
    <p id="interface">Loading...</p>
</div>

(顺便说一句,我尝试添加内联样式<p>,但它不起作用:

<p id="interface" style="z-index:99999">Loading...</p>

使用AJAX,我用有效的复选框html替换'#interface'的内容,例如:

<label for="right">
  <input name="right" type="checkbox">
</label>

我有通常的jQuery/Dialog UI文件.

最后一点,我试图发挥创意,因为这不起作用并手动切换复选框:

if ($(evform.target).prop('type')=="checkbox"){
      $(evform.target).checked;
}

*编辑更新*

截至2013年12月22日(EDGE预发行版)的jQuery核心,此错误已得到修复.我希望他们很快发布稳定版(我相信它将是v1.10)!你可以在jfiddle中测试它:http://jsfiddle.net/tj_vantoll/XXGQA/

http://bugs.jqueryui.com/ticket/6267

我有一个容器和容器中动态生成的div.

HTML

<div id="overlay">
</div>
<div id="cont">
    <div id="e1">
        Some
    </div>
    <div id="e2">
        Content
    </div>
</div>

CSS

#cont{
    position: fixed;
    top:40%;
    left:20%;
    z-index:999;
    color:#a8a8a8;
}
#overlay{
    position:fixed;
    background: rgb(0,0,0);
    opacity: 0.5;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1000;
}
#e2{
    z-index:1001;
}

检查这个jsfiddle: http ://jsfiddle.net/UkbXU/

我有一个覆盖z-index 1000和背景rgba(0,0,0,0.5)和照片容器在叠加后面我想只有一个元素在覆盖之上,即z-index 1001.还有其他元素在容器中,我这样做是为了显示元素突出显示的效果.但是创建一个带有z-index的类:1001并不会使元素覆盖上面.

如何将一个元素的z-index设置为大于容器？

标题说明了一切,我的应用程序每次更改布局视图时都会崩溃,我需要按钮位于最顶部,而imageView1位于最底部,iv_photo位于两者之间.所以我尝试拿我的xml按钮并将其移动到底部,我的应用程序崩溃,我不改变代码或任何东西,所有我只是做的是移动代码.继承我的代码

DOESNT CRASH

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".DashboardActivity" >

    <ImageView
        android:id="@+id/iv_photo"
        android:layout_width="125dp"
        android:layout_height="125dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp" />

    <Button
        android:id="@+id/btn_crop"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignLeft="@+id/iv_photo"
        android:layout_alignTop="@+id/iv_photo"
        android:text="@string/Nothing" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="105dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:scaleType="fitXY"
        android:src="@drawable/whitestrip" />

</RelativeLayout>

崩溃了

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".DashboardActivity" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="105dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:scaleType="fitXY"
        android:src="@drawable/whitestrip" />

    <ImageView
        android:id="@+id/iv_photo"
        android:layout_width="125dp"
        android:layout_height="125dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp" />

    <Button
        android:id="@+id/btn_crop"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignLeft="@+id/iv_photo"
        android:layout_alignTop="@+id/iv_photo"
        android:text="@string/Nothing" />

</RelativeLayout>

这是我在LogCat中遇到的错误

05-01 13:49:15.632: E/AndroidRuntime(32148): FATAL EXCEPTION: main
05-01 13:49:15.632: E/AndroidRuntime(32148): java.lang.RuntimeException: Unable …

我正在尝试在对话框主体组件内设置一个降档组件，使用zIndex无法正常工作，并且建议始终出现在下面。

有没有办法在与对话框一起使用时在顶部显示降档建议？

这是一个内部带有降档组件的对话框（在“搜索国家/地区”内键入“ a”以显示隐藏的建议）作为此问题的示例：https : //codesandbox.io/s/q3lllwr08j