标签: z-index

什么会使一个html元素,例如ul aboslutely定位与5000的zindex出现在低zindex的div下面说0？在IE8中可以看到此行为.

我正在创建一个Android应用程序,在我的应用程序中,我有一个画布,我通过canvas.drawBitmap()函数绘制了大量的位图到画布.根据我的理解,这些位图上的z-index是根据它们绘制到画布的顺序设置的.我想弄清楚的是在绘制这些位图之后,如果我可以动态更改位图上的z-index以将其推到顶部？这似乎是一个非常简单的问题,但我还没有找到解决方案的运气.

我有一个菜单和一个搜索框.我想把搜索框和菜单项一起放.但我的菜单是在一个名为'custommenu'的div中的不同文件中构建的,它使用以下css:

#custommenu {
  position:relative;
  z-index:999;
  font-size: 14px;
  margin: 0 auto;
  padding: 10px 16px;
  width: 918px;
  background-color: #FB0A51; 
  border-top-left-radius: 10px 10px; 
  -moz-border-top-left-radius: 10px 10px;
  border-top-right-radius: 10px 10px; 
  -moz-border-top-right-radius: 10px 10px;
}

而我的搜索框位于一个单独的文件中,如下所示:

 <div class="header">
   some code
   <div class="quick-access">
      some code
   <php echo $this->getChildHtml('topSearch') ?>;
   </div>
 </div>

我尝试将以下内容添加到css文件中,以便搜索框位于菜单的顶部,但它不起作用

 .header .form-search { 
   position:absolute; 
   right:29px;  
   z-index:1000; 
   top: 80px;  
   width:315px;  
   height:30px;  
   padding:1px 0 0 16px; 
 }

搜索框仍隐藏在菜单后面.我想在菜单中设置搜索框.我该怎么做？

编辑:这是div的css,其中包含搜索框,

 .header { width:930px; margin:0 auto; padding:10px; text-align:right; position:relative; z-index:10; border-top:3px solid #3C3C42;}
 .header .quick-access { float:right; width:600px;margin-top:-125px; …

我有一个带有多个标记的图层,图标相当大,所以它们重叠.通过地图一侧的列表,用户可以选择一个标记,地图将平移(和缩放)到它.但它仍将落后于其他一些制造商.如何获得个体制造商z-index并设置它？获得最高使用的z-index并添加一个,我会很有用.(另一个解决方案是将标记的总数添加到z-index)

标记(或特征)位于myLib.features数组中.控制台不显示任何z-index类型的功能.

我无法为此找到合适的示例或api函数.

编辑:

我找到了这个例子:http://dev.openlayers.org/examples/ordering.html 我真的不明白它.不知何故,创建的特征通过某些符号化器获取图层给出的下一个z-index.我不知道如何将这种静态排序变成动态排序.

我发现如果我想进入第二级菜单,主菜单中的悬停效果会消失.在这里您可以找到示例:

http://bfb.bplaced.net/ie/

HTML:

<div id="background-slider">
    <a href="http://www.hdwallpapersarena.com/wp-content/uploads/2012/10/Opera-Background-Blue-Swirls.jpg"></a>
    <a href="http://www.hdwallpapersarena.com/wp-content/uploads/2012/10/green-abstract-background.jpg"></a>
</div>
<div id="menu">
    <nav>
        <ul class="nav-level-1">
            <li class="level-1 clearfix">
                <a href="unternehmen.html" class="level-1">Unternehmen</a>
                <ul class="nav-level-2">
                    <li class="level-2"><a href="/unternehmen/die-firma.html" class="level-2">Die Firma</a></li>
                    <li class="level-2"><a href="/unternehmen/das-team.html" class="level-2">Das Team</a></li>
                    <li class="level-2"><a href="/unternehmen/allgemeines.html" class="level-2">Allgemeines</a></li>
                </ul>
            </li>
        </ul>
        <div class="clearer"></div>
    </nav>
</div>
<div id="script-section" class="hidden">
    <script src="./js/jquery.superbgimage.min.js"></script>
    <script>
        $(document).ready(function(){
            // Options for SuperBGImage
            $.fn.superbgimage.options = {
                transition: 1,
                speed: 'slow',
                randomtransition: 0,
                slideshow: 1,
                slide_interval: 6000,
                randomimage: 0
            };

            // initialize SuperBGImage
            $('#background-slider').superbgimage().hide;
        });
    </script>
</div>

CSS:

#menu …

我遇到了使用z-index我的多列布局的问题column-count.我希望将单击的div移动到列表顶部.animate(),但是当我单击右列上的元素时,它会在左列的元素后面.这适用于Firefox,但它在Chrome中不起作用.

有任何想法吗？

function gotoTop(element) {
    var destinationTop = $('.categories').offset().top;
    var elementOffsetTop = $(element).offset().top;
    var distanceTop = (elementOffsetTop - destinationTop);
    return distanceTop;
}

function gotoLeft(element) {
    var destinationLeft = $('.categories').offset().left;
    var elementOffsetLeft = $(element).offset().left;
    var distanceLeft = (elementOffsetLeft - destinationLeft);
    return distanceLeft;
}
$('.category').on('click', function () {
    $(this).css('position', 'relative');
    $(this).css('z-index', '9999');
    $(this).siblings().css('z-index', '10');
    $(this).animate({
            top: '-' + gotoTop(this) + 'px',
            left: '-' + gotoLeft(this) + 'px'
        }, 2000
    );
});

.categories {
    width: 500px;
    font-size: …

我对IE11有一个奇怪的布局问题,我网站上的导航似乎是"坐在下面"另一个元素.奇怪的是它适用于除IE11之外的所有浏览器.

此外,如果您点击圆形块中的"转到福利并查看原因..",它会将您带到站点的第二部分.导航工作从除着陆页之外的每个部分.

链接到此处的网站:http://goo.gl/WS1M8l

希望有人能指出我正确的方向.

多谢你们.

我正在尝试让我的表格显示在叠加层的顶部.到目前为止这么糟糕.请帮忙.

http://jsfiddle.net/u96coj0q/

<table>
    <tr><td>Test</td></tr>
</table>
<button>Overlay</button>

table {
    background-color: white;
    height: 300px;
    width: 300px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    z-index: 50;
}

$('button').click(function() {
        $('body').append("<div class='overlay'></div>");
        $('table').css('zIndex', '60');
        $('table').css({ zIndex: 60 });
});

我有一个View,它包含了包含它的Fragment之外的东西,我将它配置为使用它来绘制外部的内容.

问题是它可以在任何地方工作,但在ActionBar和ActionBar选项卡上.

mActionBar.addTab(
    mActionBar.newTab()
        .setCustomView(t));

我正在使用appCompat并以这种方式添加标签:

我添加android:clipChildren="false"到所有父视图,但它不适用于ActionBar和ActionBar选项卡.

理想的观点:

但结果如下:

每当我尝试在网页中使用z-index来改变堆叠重叠div的顺序时,我似乎遇到了一个问题,即被迫降低的div对鼠标事件没有反应.

在我目前的情况下,我有:

<div class="leftcolumn">
<div class="leftbar"></div> <!-- a 95px wide bar on the left -->
...
<h3>header</h3> <!-- a little header sitting inside the leftbar
...
</div>

默认情况下,h3没有显示 - 它隐藏在左侧栏后面.如果我添加z-index:5; 到了H3,它仍然没有显示出来.

所以我在左栏添加了z-index:-1.现在它隐藏在左栏后面 - 但至少h3显示.

所以我在左栏添加了z-index:-2.现在一切看起来都正确 - 但你不能点击左栏内的任何东西.鼠标光标不会从箭头改变.

我在Chrome和Firefox中都得到了这种确切的行为.IE7根本不显示左栏,但至少可以点击.

那么,我是否误解了z-index,或者这里的FF和Chrome都存在错误？z-index可以有效地用于这种东西,还是我必须找到另一种方式？

(我可以更改HTML,但越少越好.)