Question

我已开始为我的项目使用光滑滑块。我想在滑块上方添加一个h1标签。我通过创建一个h1标签然后给它一个绝对位置来实现这一点。但现在文本出现在滑块后面。继承我的代码：

.centered {
    text-align: center;
    position: absolute;

}

.slick-slide{
    width: 100%;
    height: 100vh!important;
}

img {
    width: 100%;
    height:100%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--general stuff --> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">
    <!-- custom css-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--custom css-->
    <link href="css/custom.css" rel="stylesheet">
    <!--slider-->
    <link rel="stylesheet" type="text/css" href="slider/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slider/slick/slick-theme.css"/>
  </head>

  <body>
    <div class="slider-section">
      <h1 class ="centered">test</h1>
      <!--slider -->
      <div class="your-class">
        <div><img src="https://dailypost.files.wordpress.com/2016/06/city.jpeg?w=1200"></div>
        <div><img src="https://dailypost.files.wordpress.com/2016/06/city.jpeg?w=1200"></div>
        <div><img src="https://dailypost.files.wordpress.com/2016/06/city.jpeg?w=1200"></div>
      </div>
    </div>
    <!--jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Bootstrap js -->
    <script src="js/bootstrap.min.js"></script>
    <!--slick slider-->
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slider/slick/slick.min.js"></script>
    <!-- custom js -->
    <script src="js/custom.js"></script>
  </body>
</html>

您可以在此处找到现场演示：

http://u512656.gluweb.nl/mop/

我试过了：

.centered {
    text-align: center;
    position: absolute;
    z-index: 1000;
}

z索引

Answer 1

你指的是h1？

如果是这样，请尝试在此元素上设置z-index，因为绝对定位元素会创建图层。

Answer 2

尝试将此添加到custom.css文件

.your-class.slick-initialized.slick-slider { z-index：-1; }

这会将您的所有内容都放在此滑块上方。

Answer 3

如果您希望文本显示在滑块上方，则需要将其设为块元素，而不是绝对定位。

如果您希望文本位于滑块顶部，可以通过添加另一个类（或修改.centered）来执行此操作：

z-index: 1;
color: #fff; // Something other than black, as the background image is currently black.

Answer 4

您可以将z-index css属性添加到h1标记。

.slider-section h1.centered{
    z-index: 1;//you can keep it any larger value
}

Answer 5

比对所有内容添加z-index更为明智的解决方案是将H1标签放置在标记中的滑块下方。然后，您的绝对位置将自动将H1放置在英雄的前面。 Z索引是可以的，但是这里没有必要，而且随着项目的发展，它会引起混乱。

H1标签后面的滑块

5 个答案: