个人中心
gpt4 book ai didi

html - Bootstrap 绝对定位的导航栏不会位于相对定位的横幅图像之上

转载 作者：行者123 更新时间：2023-11-28 02:58:42 28 4
gpt4 key购买 nike

我有一个使用 position: relative; 的横幅图片在具有位置的包装器内部:相对；我添加了一个 Bootstrap navbar-static-top。我的目标是让导航栏位于横幅图像之上。到目前为止，我已经尝试改变一些元素的位置，尽管我尽了最大的努力，但我仍然在导航栏和横幅图像之间留有空白。我相信它与我正在使用的导航栏类之一有关，但我不确定是哪一个。下面是相关的 HTML5 和 CSS3 代码。

.wrapper {
	position: relative;
	padding: 0 15px;
}

#banner {
	height: 50vh;
	width: 100vw;
	position: relative;
}

#responsive-nav {
	background-color: transparent;
	position: absolute;
	z-index: 2;
	
}

#logo {
	position: absolute;
	top: 15px;
	left: 60px;
	z-index: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mock Up</title>
    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- Bootstrap Link -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
	<div class="nav-wrapper">
     <nav class="navbar navbar-static-top">
        <!--Navbar-->
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
                    <!-- Collapsing Hamburger Buttons for mobile -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>         
            </div>
            <!--Menu Items--> 
            <div class="collapse navbar-collapse navbar-right" id="mainNavBar">
                <ul class="nav navbar-nav">
                    <li class="nav-item">
                        <a href="#about">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="#work">Projects</a>
                    </li>
                    <li class="nav-item">
                        <a href="#contact">Contact</a>
                    </li>
                 
                </ul>
            </div>
            </div>
        </div>
                <div class="wrapper">
                <img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1">
                <img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1">
            </div>
            </div>
        </div>
        
    </nav>
    <script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

最佳答案

bootstrap 中的

navbar 类提供了 margin-bottom:20px。您可以通过使其变得重要来覆盖 margin-bottom 以删除导航栏和图像之间的空间

.wrapper {
	position: relative;
	padding: 0 15px;
}

#banner {
	height: 50vh;
	width: 100vw;
	position: relative;
}

#responsive-nav {
	background-color: transparent;
	position: absolute;
	z-index: 2;
	
}

#logo {
	position: absolute;
	top: 15px;
	left: 60px;
	z-index: 1;
}
.navbar {
  margin-bottom: 0px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mock Up</title>
    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- Bootstrap Link -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
	<div class="nav-wrapper">
     <nav class="my-class navbar navbar-static-top">
        <!--Navbar-->
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
                    <!-- Collapsing Hamburger Buttons for mobile -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>         
            </div>
            <!--Menu Items--> 
            <div class="collapse navbar-collapse navbar-right" id="mainNavBar">
                <ul class="nav navbar-nav">
                    <li class="nav-item">
                        <a href="#about">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="#work">Projects</a>
                    </li>
                    <li class="nav-item">
                        <a href="#contact">Contact</a>
                    </li>
                 
                </ul>
            </div>
            </div>
        
                <div class="wrapper">
                <img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1">
                <img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1">
            </div>
           
       
        
    </nav>
    <script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

关于html - Bootstrap 绝对定位的导航栏不会位于相对定位的横幅图像之上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46307721/

28 4 0
文章推荐： html - 无论如何要先固定背景图像然后滚动？
文章推荐： css - 变换后如何进行不透明度过渡
文章推荐： php - 如何在一页上显示来自 PHP 查询的特定行数，然后在返回的行数超过指定数量时扩展 div
文章推荐： php - 通过 php 执行警报功能时 Javascript 错误