Bootstrap 3 固定导航栏和固定内容“抽屉”答案

【问题标题】：Bootstrap 3 fixed navbar and fixed content "drawer"Bootstrap 3 固定导航栏和固定内容“抽屉”
【发布时间】：2015-05-18 19:36:34
【问题描述】：

我创建了一个代码 sn-p 来尝试演示我想要实现的目标。（我试图让它尽可能简单）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Fixed Top Navbar and "drawer" content area</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	
    <!-- Custom styles for this template -->
    <style>
		#fixed-panel-top {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			width: 800px;
			margin-left: auto;
			margin-right: auto;
		}
		
		.custom-navbar-example {
			height: 40px;
			background-color: yellow;
			z-index: 1030;
		}
		
		.fixed-content-top {
			height: 200px;
			background-color: blue;
			z-index: 1;
		}
		
		.relative-content {
			width: 800px;
			margin-top: 300px;
			height:1000px;
			background-color: red;
			z-index: 1020;
		}
	</style>
  </head>

  <body>

    <!-- Fixed navbar -->
	<div id="fixed-panel-top">
		<!-- Navbar -->
		<div class="custom-navbar-example"></div>
	
		<!-- Top fixed content area -->
		<div class="fixed-content-top">
		</div>                         
	
	</div>

    <div class="container relative-content">
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
</html>

黄色 div 代表一个固定的顶部导航栏，蓝色 div 代表导航栏下方的固定顶部内容区域，红色 div 代表相对的“页面其余内容”。

所需的效果是，当您向下滚动时，红色 div 将出现在蓝色 div 的顶部，但在黄色 div 的下方。这将使蓝色 div 成为可以被红色 div 隐藏的内容的“抽屉”。我已经尝试使用 z-index 来表示这一点，但无济于事。

谁能指出我正确的方向或解决它？

编辑：澄清

我希望黄色和蓝色 div 都被固定。我试图实现的错觉是红色 div 向上滚动到蓝色 div 上。如果蓝色 div 包含图像，则图像将保持静止，而红色 div 向上滚动以隐藏它。

【问题讨论】：

如果你想要蓝色 div 上面的红色 div 为什么不在里面？
我不知道需要这样吗？黄色 div 不在红色 div 内，它隐藏得很好？我认为这与黄色 div 的 z-index 有关吗？抱歉...对 UI 不太熟练
这一切都取决于你需要对你的代码做什么，但如果它只是一件简单的事情并且对你有用，那么将红色的放在蓝色中
您介意发布一个 sn-p 来说明您的意思吗？我不明白蓝色 div 中的红色 div 是如何解决问题的

标签： html css twitter-bootstrap-3

【解决方案1】：

以下是您想要的输出。 position:relative 做到这一点。

#fixed-panel-top {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			width: 800px;
			margin-left: auto;
			margin-right: auto;
		}
		
		.custom-navbar-example {
			height: 40px;
			background-color: yellow;
			z-index: 1030;
            position: relative;
		}
		
		.fixed-content-top {
			height: 200px;
			background-color: blue;
			z-index: 1;
		}
		
		.relative-content {
			width: 800px;
			margin-top: 300px;
			height:1000px;
			background-color: red;
			z-index: 10;
            position: relative;
		}

<div id="fixed-panel-top">
		<!-- Navbar -->
		<div class="custom-navbar-example"></div>
	
		<!-- Top fixed content area -->
		<div class="fixed-content-top">
		</div>                         
	
	</div>

    <div class="container relative-content">
    </div>

查看Fiddle Here.

希望对你有帮助。

编辑：

在 chrome 中无法推翻父 z-index。检查Reference Link

更新：

对于 chrome 中的固定，您必须在 HTML 中进行更改。

查看Updated Fiddle Here.

【讨论】：

嗨 Ketan，红色的 div 现在正在通过黄色的 div。这个想法是让红色 div 只通过蓝色 div，但仍然在黄色 div 下通过
哦，在 chrome 中没问题。我会看看。在 Firefox 中它的工作完美。
谢谢科坦。所以看起来这是一个 Firefox 问题，实际上可以让你这样做。还有其他方法可以构建 div 来实现我想要的吗？