Question

我添加了一个固定的div。到顶部的标题，以使其保持原位，但其他元素保持重叠。

我尝试使用建议的修补程序，例如使用z-index，但这些行为破坏了我的模态弹出窗口。

是否有一种简单的方法可以防止这种情况发生？我添加了一个保证金底部，但也没有做到这一点。

这是我的代码：

.home-header {
  position: fixed;
  width: 100%;
  background-color: #fff;
}

和HTML：

<!DOCTYPE html>

{% load staticfiles %}
<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>{% block title %}{% endblock %}</title>
    <link rel="shortcut icon" href="{% static 'assets/favicon.png' %}"/>
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'css/font-awesome.css' %}" rel="stylesheet">
    <link href="{% static 'css/bootstrap-social.css' %}" rel="stylesheet">
    <link href="{% static 'base.css' %}" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Aladin" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">
    {% block head-extras %}{% endblock %}
  </head>
  <body>
    <nav class="navbar navbar-toggleable-md home-header">
      <div class="container">
        <a href="/home" class="navbar-brand">
          <h1 id="logo" class="nav-wel">Pomodoro</h1>
        </a>
        {% if request.user.is_authenticated %}
          <div class="status">Balance:&nbsp;{{ request.user.profile.coins }}<img class="coin-img" src="{% static 'assets/coin.png' %}" height="40px" width="auto"></div>
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle welcome nav-wel" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" id="welcome">Welcome {{ user.get_username }}</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="/shop">Shop</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="/leaderboard">Leaderboard</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="/users/change-password">Change Password</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="/users/logout">Logout</a>
              </div>
            </li>
          </ul>
        {% endif %}
      </div>
    </nav>
    {% block content %}
    {% endblock %}
    <script src="{% static 'js/jquery-3.2.1.js' %}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="{% static 'js/bootstrap.js' %}"></script>
    <script src="{% static 'js/pomodoro.js' %}"></script>
  </body>
</html>

Answer 1

您可以使用2个顶级DIV - 一个用于标题，第二个用于内容。任何其他东西必须在内容div下。如果您希望弹出窗口显示在标题下 - 只需在弹出窗口中使用绝对位置，并设置相对于内容DIV。像这样：

<div id='header' style='position:fixed;top:0;left:0;width:100%;height:30px;background:pink'>
    Header
</div>
<div id='content' style='position:relative;margin-top:30px;background:green' >
    Content...
    <div id='popup' style='position:absolute;top:0;left:100px;width:100px;height:100px;background:yellow'>Popup</div>
</div>

Answer 2

position: fixed将元素从页面其余部分的流中取出，因此它会重叠，除非您小心地将其他所有内容放在它周围 - 即便如此，因为fixed相对于<用户滚动所有投注后，em> viewport 不是文档。

如果您希望将其保留在页面流中，以便其他元素位于其周围而不是位于其后面，请不要使用position: fixed（或position: absolute也允许重叠）。< / p>

停止固定位置div重叠

2 个答案: