分层：问题将Navbar与其他元素放在一边....？

时间：2015-10-26 22:57:03

标签： html css z-index nav layer

我将尽力解释这个问题。这张照片代表了我想要实现的布局。

This is a Picture of the Layout I'm going for 我正试图在旁边有一个导航栏。我正在使用bootstrap，所以这是关于行布局的col-md-3。我能够把它放到我的文档中，但是我很难用的是在主体标签顶部分层这个导航栏。

我有一个正文标记，其图像设置为背景，无重复，背景大小为100％，所有这一切。但它总是覆盖导航栏。如何让导航栏（以及其他元素）在之上分层。我希望我可以用z-index做到这一点，但经过半个小时的玩弄这个，我想也许我不理解z-index几乎和我想的那样多。

继承人我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class = "navWrap row">
    <div class = "col-md-3">
        <div class = "brand">


        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</body>
</html>

继承我的CSS：

body {

    background-image:url(img/carousel-lifestyle.jpg);
    background-size: 100%;
    position: fixed;
    background-repeat: no-repeat;
    position: fixed;
    z-index: -1;
}

.col-md-3 {
    background-color: white;
    position: absolute;
    z-index: 1;
}
.brand {
    background-image:url(img/Screen%20Shot%202015-10-26%20at%205.38.31%20PM.png);
    background-size: 100%;
    background-repeat:no-repeat;
    width: 75px;
    height: 200px;
    padding:20px 100px 20px 10px;
    margin-left: 25px;
}

提前致谢！

0 个答案:

没有答案
相关问题
最新问题