Question

我无法将info-pop-title置于bar-header之上，因为您可以从我当前的代码中看到文字＆＃34; TEST ----＆＃34;是可见的，但在bar-header元素下。

你能指出我做错了什么以及如何解决它

PS：我不能改变HTML的结构，只能改变CSS解决方案

enter image description here

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        .bar-header, .bar-footer {
            position: fixed;
            left: 0px;
            width: 1280px;
            z-index: 1;
            background-color: rgba(50,50,50,0.5);
            text-align: center;
        }

        .bar-header {
            top: 0px;
            height: 60px; /* safearea top 25 + content 20 + space bottom 15*/
        }

            .bar-header h1 {
                position: fixed;
                top: 25px; /* safearea top 25 */
                left: 25px; /* safearea left */
                font-size: 20px; /* content */
            }

        .bar-footer {
            top: 670px;
            height: 50px; /* safearea bottom 20 + content 20 + space top 10 */
            font-size: 20px; /* content */
        }

            .bar-footer > ul {
                position: fixed;
                top: 680px; /* footer top 670 + space top 10*/
                left: 1150px;
            }

                .bar-footer > ul li {
                    float: left;
                }

            .bar-footer li:nth-child(1) span {
                color: blue;
            }

        #scene-main {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 1280px;
            height: 720px;
            /*background: #ffffff url("/auth/assets/tv-safearea-transparent.png") no-repeat left;*/
            background-color: darkgrey;
        }

        #btn-up, #btn-down {
            position: fixed;
            left: 1230px;
            width: 50px;
            height: 50px;
            background-color: yellow;
            outline: 1px solid black;
            z-index: 200;
        }

        #btn-up {
            top: 0px;
        }

        #btn-down {
            top: 50px;
        }

        #content {
            position: fixed;
            top: 0px; /* header */
        }

        .content-section:first-child {
            margin-top: 60px; /* header height content does not go under header */
        }

        .content-section {
            background-color: lightgray;
            outline: 1px solid black;
            width: 1280px;
        }

        /* Content sizes */
        .content-snippet {
            height: 360px; /* 1 slots */
            width: 1280px;
            background-color: lightblue;
            outline: 1px solid green;
        }

            .content-snippet:nth-child(even) {
                background-color: lightcoral;
            }

        .content-section h2 {
            position: relative;
            top: 30px; /**avoid to go under the header bar*/
        }

        .active {
            background-color: violet !important;
        }

        .snippet-pop-info {
            position: fixed;
            top: 640px; /*430 = final position as visible / 670 = final position as not visible */
            width: 1280px;
            height: 240px;
            background-color: darkblue;
            opacity: 1;
            color: white;
        }

            .snippet-pop-info ul {
                position: absolute;
                top: 0px;
                left: 1155px;
                width: 100px;
            }

                .snippet-pop-info ul li {
                    width: 100px;
                }

            .snippet-pop-info .rating {
                position: absolute;
                top: 65px;
                left: 25px;
                unicode-bidi: bidi-override;
                direction: rtl;
            }

                .snippet-pop-info .rating > span {
                    display: inline-block;
                    position: relative;
                    width: 20px;
                }

                    .snippet-pop-info .rating > span:hover:before,
                    .snippet-pop-info .rating > span:hover ~ span:before {
                        content: "\2605";
                        position: absolute;
                    }

        #info-pop-title {
            position: fixed;
            top: 0px;
            left: 250px;
            z-index: 1;
            font-size: 30px;
            color: white;
            font-weight: bold;
        }


        #info-pop-description {
            position: absolute;
            overflow: hidden; /* hide content that does not fit in the columns*/
            top: 25px;
            left: 300px; /* TEST */
            height: 80px;
            width: 800px;
            font-size: 20px;
            -webkit-column-count: 2;
            -webkit-column-gap: 10px;
            column-count: 2;
            column-gap: 10px;
        }
    </style>
</head>
<body>
    <div id="viewport">


        <div id="scene-main" class="scene" style="">
            <div class="bar-header"><h1>ChannelLive logo</h1></div>
            <div id="page">
                <div id="content">
                    <div id="snippet-cnt-0" class="content-snippet">
                        0
                        <div class="snippet-pop-info" style="top: 720px;">
                            <h1 id="info-pop-title" style="word-wrap: break-word;">TEST-----------------</h1>
                            <div class="rating"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div>
                            <div id="info-pop-description" style="word-wrap: break-word;">null</div>
                            <ul>
                                <li class="focusable" data-href="movie-play">Play</li>
                                <li class="focusable" data-href="movie-details">Details</li>
                            </ul>
                        </div>
                    </div>

                </div>
</body>
</html>

Answer 1

我们不清楚你要完成什么，但我可以通过摆脱

让Chrome像Firefox一样工作

    position: fixed;

来自#content的

样式。这是否适用于您的布局的更大范围，我不知道，但问题是z-index的工作方式是奇怪和复杂的，并且不仅涉及单个固定元素，还涉及任何固定父母他们可能有。

编辑 - 哦，还要将z-index的{{1}}设置为2. Here is an updated version of your fiddle.

Answer 2

制作你的

.bar-header, .bar-footer{
    z-index:0;
}

这样就可以了。由于.bar-header和.info-pop-title的z-index相同。

Answer 3

在内容div中添加z-index ＃内容 { 位置是：固定; 顶部：0; 的z-index：1; }

Answer 4

我担心你无法以html嵌套的方式使用它。要在顶部拉出以覆盖其余部分的元素位于主容器中，而第二个元素在标题中被隔离。如果您想将info-pop-title带到那里，您必须更改#page元素的z-index，这将涵盖所有内容。

我看到你能用这种结构实现的唯一目的就是相对定位你的多样化容器，并以负余量改变你的信息pop-title的css，这次绝对定位。

定位z-index不能按预期工作

4 个答案: