nat*_*270 4 html css twitter-bootstrap
我正试图在我的网站上显示图像上的标题.这是一个小提琴:
https://jsfiddle.net/o3942ppa/1/
我尝试通过创建带有标头的标题来解决问题,例如:
<h2 id="header">Text</h2>
并使用z-index完全设置样式以确保它在顶部显示如下:
#header{
position: absolute;
z-index: 1000;
top: 200px;
left: 200px;
}
我假设这将导致将标题定位在从文档边缘定位的所有元素的顶部.但是,我没有得到理想的结果.我该怎么做呢？另外,我昨晚读到使用浮子比定位更好.不确定这是否适用于这种情况,或者它是否属实.如果有人可以权衡,我将不胜感激.
小智 7
您必须调整HTML内容的结构,以便#header在您之前.parallax.使用您想要的风格:
.parallax{
background-image: url("https://images.pexels.com/photos/349608/pexels-photo-349608.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
}
#header{
position: absolute;
z-index: 1000;
top: 200px;
left: 200px;
}
.text-box{
height: 600px;
padding: 50px;
}
@media only screen and (max-device-width: 1024px) {
.parallax {
background-attachment: scroll;
}
}
.navbar {
margin-bottom: 0 !important;
}<title>Bootstrap Default Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<h1 id="header">Text</h1>
<div class="parallax"></div>
<div class="col-lg-12 text-box text-center">
<h1>Restauraunt Heading</h1>
</div>
</body>