标签: z-index

如何"z-index"使菜单始终位于内容之上

我有一个问题,我无法弄清楚如何纠正这个问题.我想要的是"红色框"在z-index 2中保留在页面顶部,而背景上的所有内容都保留在索引1上但不知何故这个代码"折叠"了图层.如果有人可以帮助我,我真的很感激.对不起我的英语不好.提前致谢.

<html>
<head>
<title></title>
<style type="text/css">

body { margin: 0; }

#container {
    position: absolute;
    float: right;
    z-index: 1;

}

.left1 { 
    background-color: blue;
    height: 50px;
    width: 100%;

}
.left2 { 
    background-color: green;
    height: 50px;
    width: 100%;

}


#right { 
    background-color: red;
    height: 300px;
    width: 300px;
    float:right;
    z-index: 999999;
    margin-top: 0px;
    position: relative;
}




</style>
</head>

<body>

<div id="container"></div>
<div class="left1">LEFT BLUE</div>
<div class="left2">LEFT GREEN</div>
</div>
<div id="right">RIGHT RED</div>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

css z-index

17
推荐指数
2
解决办法
14万
查看次数

z-index如何真正起作用?

z-index实际上如何运作?它是否在没有指定的元素上起作用position?它是否支持具有指定的元素(即使它们在顶部)position

数字必须像这样负面吗?

<div style='z-index:-2;'>below</div>
<div style='z-index:-1;'>less below</div>
<div style='z-index:0;'>on top</div>
Run Code Online (Sandbox Code Playgroud)

?或不?所有正数(增加值)是否会以最后一个位于顶部,中间位于中间,第一个位于底部?

我正在向W3Schools学习,他们对此的教训非常混乱!:(

非常感谢提前!

html css z-index

17
推荐指数
2
解决办法
2万
查看次数

相对布局中的z-index

我需要在RelativeLayout中的Button上方放置一个TextView.但它不起作用:TextView总是在Button下,即使我在按钮之前移动它.我也尝试过bringChildToFront()在前面移动textview的功能,但没有运气.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rlBottom"
android:layout_width="fill_parent"
android:layout_height="match_parent">

<Button
    android:id="@+id/bVio"
    android:layout_width="wrap_content"
    android:layout_height="50dip"
    android:layout_alignParentLeft="true"
    android:text="VIO"></Button>

    <TextView
        android:id="@+id/bVio_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/bVio"
        android:layout_marginTop="6dip"
        android:layout_marginRight="6dip"
        android:text="00"
        android:textSize="15dip"
        android:textColor="#FF0000"/>
</RelativeLayout>
Run Code Online (Sandbox Code Playgroud)

android z-index android-relativelayout

17
推荐指数
2
解决办法
2万
查看次数

如何在用户单击其子元素时阻止父点击事件?AngularJS

我有一个<div>,ng-click但这<div>有一个子元素与还ng-click指令.问题是,子元素上click事件也会触发父元素click事件 .

当我点击他的孩子时,如何阻止父点击事件?

这是一个jsfiddle来说明我的情况.

预先感谢您的帮助.

编辑

这是我的代码:

<body ng-app ng-controller="TestController">
<div id="parent" ng-click="parentClick()">
    <div id="child" ng-click="childClick()"></div>

    <p ng-bind="elem"></p>
</div>

<div><p style="text-align:center" ng-bind="childElem"></p></div>
</body>

<script>
function TestController($scope) {
    $scope.parentClick = function() {
        $scope.elem = 'Parent';
    }

    var i = 1;
    $scope.childClick = function() {
        $scope.elem = 'Child';
        $scope.childElem = 'Child event triggered x' + i;
        i++;
    }
}
</script>
Run Code Online (Sandbox Code Playgroud)

javascript z-index angularjs

17
推荐指数
3
解决办法
1万
查看次数

根据页面呈现顺序反转z-index

示例标记:

<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div>
<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div>
<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div> 
Run Code Online (Sandbox Code Playgroud)

CSS示例:

.wrapper {z-index: 1}
.wrapper div {display: none; position: absolute;}
Run Code Online (Sandbox Code Playgroud)

通过javascript(jQuery)我将一个click事件附加到每个h2,然后将内容div切换为display:block.

目的是这些是可扩展的内容块,将与页面上的任何其他内容重叠.

问题是,我希望第一个与第二个重叠,如果所有这些都打开,它将与第三个重叠.

但是,由于每一个都在前一个渲染之后渲染,因此实际的堆叠顺序是相反的(最后一个内容div创建的结尾覆盖了先前创建的一次).

有没有一种聪明的方法来逆转CSS/HTML的这种行为?或者是让页面呈现的解决方案,然后通过javascript,按顺序获取所有内容div并以相反的顺序给它们每个z-index?

更新:

这是一些更具体的标记:

<div style="padding: 10px;">Hello World
    <div style="position: relative; top: -5px;">
        <div style="position: absolute; background: yellow;"><p>This</p><p>is</p><p>overlapping</p></div>
    </div>
</div>
<div style="padding: 10px;">Hello World
    <div style="position: relative; top: -5px;">
        <div style="position: absolute; background: orange;"><p>This</p><p>is</p><p>overlapping</p></div>
    </div>
</div>
<div style="padding: 10px;">Hello World
    <div style="position: …
Run Code Online (Sandbox Code Playgroud)

reverse z-index overlap

16
推荐指数
3
解决办法
9360
查看次数

z-indexing浮动div

我有两个div浮动:左.我z-index第一个div在上面,但它不起作用.这是因为浮动元素没有定位?

<html>

<style>
    #wrap{
        background:#666;
    }

    #menu, #thumbs{
        float:left;
    }

    #menu{
        background:#06C;
        z-index:10;
    }
    #thumbs{
        background:#0CF;
        margin-left:-20px;
    }

</style>
</head>

<body>

<div id="wrap">
    <div id="menu">
    <p>menu</p>
    </div>
    <div id="thumbs">
    <p>thumbs</p>
    </div>
</div>


</body>
</html>
Run Code Online (Sandbox Code Playgroud)

css z-index css-float

16
推荐指数
1
解决办法
9834
查看次数

将按钮和链接放在particles.js脚本(Z-index)上

我正在尝试使用particles.js脚本,因此粒子将浮动整个页面(具有透明背景).我需要拉出粒子上方的一些链接和按钮,这样它们就可以点击了.

关于链接,我能在大"B"元素上放置大的"C"元素,而在大"C"元素上有小的"b"元素吗?

我所想的是相对意味着相对于其父亲的z-index,而如果我将所有元素设置为绝对,则显示小"b"超过大"C"是可能的,但事实并非如此.有谁可以帮我解释一下?

<div id="A">A<div id="a">a</div></div>
<div id="B">B<div id="b">b</div></div>
<div id="C">C<div id="c">c</div></div>
Run Code Online (Sandbox Code Playgroud)

css html5 z-index

16
推荐指数
1
解决办法
8166
查看次数

在元素下使用:: after时的z-index

如果我们z-index结合使用position: absolute;它可能会将::before元素置于其自身之下.另一个问题有一个很好的例子(jsfiddle.net/Ldtfpvxy).

基本上

<div id="element"></div>

#element { 
    position: relative;
    width: 100px;
    height: 100px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;

    /* create a new stacking context */
    position: absolute;
    z-index: -1;  /* to be below the parent element */
}
Run Code Online (Sandbox Code Playgroud)

呈现:

在此输入图像描述

因此堆叠上下文/顺序由定义z-index.但是,当我申请z-index: 1;到的元素,z-index: -1;它的::before我不能达到同样的事情.

只有我省略z-index了元素.

任何想法为什么会这样?该元素是否在其::before&::afterpseudos 之后呈现,以便它们变得相同z-index

工作: …

css z-index pseudo-element

16
推荐指数
2
解决办法
2万
查看次数

浮动元素是否会像定位元素一样创建单独的堆叠上下文?

最近我点了一篇关于CSS z-index属性的有趣文章.我发现它是因为我正在寻找一个答案,为什么来自前一个div的溢出文本显示在后面div的背景上方但不在下面div中的span的背景之上,就像这里(jsfiddle):

#overflowed {
  background-color: green;
  width: 300px;
  height: 100px;
}
#non-floated {
  background-color: pink;
  width: 300px;
}
#non-floated span {
  background-color: yellow;
}
Run Code Online (Sandbox Code Playgroud)

块框内的内联框

对此的解释是浏览器以特定顺序绘制元素,这是基于所谓的堆叠顺序:

浏览器中HTML/CSS布局的堆叠顺序

因此,对于布局中的根元素和每个定位元素,浏览器创建这样的堆叠顺序,然后绘制所有这些订单,对不起双关语,相应的顺序.

所以这就是内联元素和文本(创建内联框的那些)被绘制在块级元素之上的原因,即使这些块元素稍后出现在文档中,就像我上面的jsfiddle一样.


所以问题本身.

我仍然无法找到答案为什么这些内联框,如果它们被创建,内联元素和浮动元素内的文本不是根据上面的堆叠顺序的方案与浮动元素之外的其他内联框绘制,就像这里(jsfiddle):

#overflowed {
  background-color: green;
  width: 300px;
  height: 100px;
}
#floated {
  background-color: pink;
  width: 300px;
  float: left;
}
#floated span {
  background-color: yellow;
}
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

在这里你可以清楚地看到,文档中第一个div的文本(未浮动)是在span的黄色背景上方(之后)绘制的,而span是内联元素,并且根据上面的堆叠顺序的图像应该在浮动容器(其背景和边框)之后绘制.

那么有人对此有一个可靠的解释吗?我认为浮动元素可以创建类似于自己的堆叠顺序的东西,就像定位元素那样,但我还没有在网上找到任何提及.

html css z-index css-float

16
推荐指数
1
解决办法
386
查看次数

是否有针对CSS-Position和可点击区域的Android浏览器错误的解决方法?

如果您有一些可点击的内容<a>,<input>或者<area>在此之前,您有一个具有更大z-index的绝对定位元素,则存在"点击"的错误行为.
我点击可点击元素位于前面元素后面的区域.在其他浏览器中,有一个正确的行为,即点击不会通过前面的元素.但只有在Android浏览器中,您才能点击前面元素并激活后面的元素.这是一个已知的错误,你无法避免它.它甚至在更新的版本中(我在官方Android模拟器中测试2.3.3).

某些论坛中描述了一些解决方法,但它们都不适用于我.

  • 我试图在前后放一个<iframe>或一个<a>
  • 我试图更改DOM,以便刷新浏览器状态
  • 我试图将后面的元素定位为无效

我特别关注图像映射的区域元素.

有没有人有同样的问题,并设法解决它?我特别感兴趣的是对图像映射进行测试的解决方案.

css android z-index android-browser

15
推荐指数
1
解决办法
2862
查看次数