Question

我遇到了问题，我想在绝对元素前面显示相对元素，我知道z-index不适用于相对元素。如何在条带前显示图像。

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Teset</title>
<style>
.container {
      width: 1170px;margin:auto
      }
      .footer-elements{text-align:center;bottom:0;height:15em}
      .footer-elements .content-b{text-align:center;position:relative;height:10em}
      .footer-elements .content-b img.main-img{text-align:center;width:18em;margin-top:-3em}
      .footer-elements .content-b .strip-m{background:#231F20;height:9em;}
      .footer-elements .content-b .strip-border{width:100%;height:1.3em;position:absolute;top:0;left:0%;background-size:auto 100%;
      background:url(http://i666.photobucket.com/albums/vv22/SincerelyBerry/HAIJYNX/backgrounds/stripes.png) repeat-x;}
</style>
      </head>
      <body>

          <!-- container Start -->
          <div class="container">
          <br><br><br><br><br><br><br>
                  <div class="footer-elements">
                        <div class="content-b">
                            <div class="strip-m row">
                                <div class="strip-border"></div>
                                <img src="http://i252.photobucket.com/albums/hh15/liveyourlife815/stripes-1.png" class="main-img" alt="footer">
                            </div>
                        </div>
                  </div>
            </div>
      </body>
    </html>
http://jsfiddle.net/Q9EEv/9/

绝对元素是条带，所以我希望它背面的相对图像。

由于

Answer 1

在这里：http://jsfiddle.net/Q9EEv/10/

.content-b img
{
    position: relative;
}

你自己解决了。但是z-index确实适用于每个定位元素（非静态）。

将相对元素放在绝对元素CSS的前面

1 个答案: