手动插入网站标语

Question

我正在尝试手动将网站标语添加到我网站的标题图片中。下面是我正在使用的Jquery和CSS。无法显示任何文字。

www.jobspark.ca

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">  </script>

<script type="text/javascript">
$(document).ready(function(){
$("#banner-area").prepend("<div id='banner-tagline'>Tagline</div>");
});
</script>


#banner-tagline { color: #fff; font-size: 40px; text-align:center;  z-index: 99999; }

UPDATE 真棒，谢谢你的伎俩。只剩下问题是当我向下滚动时显示在我的固定导航前面，我希望它在页面上更加垂直居中

Answer 1

在＃banner-tagline元素CSS中添加position: absolute。 已编辑：此外，z-index仅在absolute或fixed位置生效。

Answer 2

z-index仅适用于定位元素，因此请将位置：relative（或position：absolute，具体取决于您将如何定位标语）添加到＃banner-tagline的样式。

Answer 3

您只需更新“banner-tagline”css，如下所示。我刚刚加入了最高位置。希望它对你有用。

#banner-tagline {
    color: #FFFFFF;
    font-size: 40px;
    position: relative;
    text-align: center;
    z-index: 99999;
    top: 50%;
}