Question

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

＆＃13;

<!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>

＆＃13;

黄色div表示固定的顶部导航栏，蓝色div表示导航栏下方的固定顶部内容区域，红色div表示页面内容的其余部分＆＃34;这将是相对的。

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

有人能指出我正确的方向还是解决它？

编辑：澄清

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

Answer 1

以下是您想要的输出。 $('input[type="button"]').on('click', function (){ var name = $(this).attr('name'); alert(name); });可以做到这一点。

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;
		}

检查Fiddle Here.

希望它有所帮助。

修改

在chrome中无法否决父z-index。查看Reference Link

更新

对于Chrome中的修复，您必须在HTML中进行更改。

检查Updated Fiddle Here.

Bootstrap 3固定导航栏和固定内容＆＃34;抽屉＆＃34;

1 个答案: