H1滑塊後面的標籤

-2

我已經開始爲我的項目使用滑塊滑塊。我想在滑塊上添加一個h1標籤。我通過創建一個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-index

來源

2017-02-14 Kevin.a

添加這個CSS .centered {z-index的：10;} –

嘗試添加以下內容到custom.css文件

。你的-class.slick-initialized.slick滑塊{ 的z-index：-1; }

這將把你的所有內容放在這個滑塊上面。

來源

2017-02-14 12:33:47

工作，但不是這覆蓋現有的設置？這是一個問題還是很好？ –

原來的滑塊css沒有聲明關於z-index的任何信息，所以它完全沒問題。 –

謝謝你 –

這是你指的h1？

如果是這樣，嘗試在此元素上設置z-index作爲絕對定位元素創建圖層。

來源

2017-02-14 12:30:44 Dave

我的意思是H1，和我想的z-index什麼都沒有發生，我會更新我的問題與我有什麼企圖。 –

我的不好，它的工作緩存 –

好吧，所以請將它標記爲回答:)謝謝 – Dave

如果您希望文本出現在滑塊上方，則需要將其設置爲塊元素，而不是絕對定位。

如果你想在滑塊的頂部的文本，您可以通過添加其他類（或修正.centered）這樣做如下：

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

來源

2017-02-14 12:34:42

您可以添加的z-index CSS屬性H1標籤。

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

來源

2017-02-14 12:36:21

H1滑塊後面的標籤

回答

相關問題