时间戳

首页 > 解决方案 > CSS位置粘性不适用于引导程序4类行

css - CSS位置粘性不适用于引导程序4类行

问题描述

我无法在网站上固定菜单。当页面内容具有带有 Bootstrap 4 ROW 类的 DIV 时，此 DIV 会覆盖菜单。这是html代码：

<html>
<head>
<script type="text/javascript" 
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<main class="main-container">
  <h4>
  Scroll page down to see the HEADER fixed on top
  </h4>
  <header class="main-header">HEADER</header>
  <div class="main-content">
    <h4>MAIN CONTENT TITLE</h4>
    <div class="row"><!-- if delete this DIV, works fine -->
      <div class="col">
        left col
      </div>
      <div class="col">
        right col
      </div>
    </div><!-- row -->
  </div><!-- main-content -->
  <footer class="main-footer">FOOTER</footer>
</main>
</body>
</html>

这里是 CSS 代码：

.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{ height:50px; background:#aaa; border-color:red;}
.main-content{ min-height:1000px;}
.main-header{position:-webkit-sticky; position:sticky; top:0;}

https://jsfiddle.net/WRobynson/qhdfbjmv/10/

请问，有人可以帮我吗？

谢谢

标签： css

解决方案

在主标题中添加 z-index。

.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{ height:50px; background:#aaa; border-color:red; z-index:100;}
.main-content{ min-height:1000px;}
.main-header{position:-webkit-sticky; position:sticky; top:0;}
<html>
<head>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-content">
    <h4>MAIN CONTENT TITLE</h4>
    <div class="row">
      <div class="col">
        left col
      </div>
      <div class="col">
        right col
      </div>
    </div><!-- row -->
  </div><!-- main-content -->
  <footer class="main-footer">FOOTER</footer>
</main>
</body>
</html>

推荐阅读