Question

请帮忙！我不能让它工作，我不明白为什么。

这是一个简单的代码，但它无法正常工作。

我希望folder.image.png出现在folder.png下面！非常感谢!!!

<!DOCTYPE html>
<html>
<head>
    <style>
    .container {
        width:  136px;
        height: 201px;
        background: url(http://s-ola.me/img/folder.png) no-repeat;
        z-index: 2;
                    position:relative;
    }

    .folder {
        width:  136px;
        height: 101px;
        background: url(http://s-ola.me/img/folder_image.png) no-repeat;
        z-index: 1;
                    position:relative;
    }

    .text {

    }
    </style>
</head>
<body>
    <div class="container">
    <div class="folder"></div>
    <div class="text">text</div>
    </div>

</body>

</html>

Answer 1

把这个

<div class="folder" style="{z-index: 2};">

并将其从CSS中取出

Answer 2

我做了这个解决方案，但我不喜欢它。它没有回答我的问题。

<html>
<head>
    <style>

    #test{z-index:-10; position:relative;}
    .container {
        width:  136px;
        height: 201px;
        background: url(http://s-ola.me/img/folder.png) no-repeat;
        position: relative;
        margin:0 auto;
    }

     .folder {
        width:  136px;
        height: 101px;
        background: url(http://s-ola.me/img/folder_image.png) no-repeat;
        z-index:-1;
        position:relative;
    }
    .text {
 margin:0 auto;
 position:relative;
 margin-left:40px;
    }
    </style>
</head>
<body>
<div id="test">
    <div class="container">
        <div class="folder"></div>
        <div class="text">text</div>
    </div>
    </div>
</body>
 </html>

无法让z-index工作

2 个答案: