阻止重疊的固定位置div

我添加了一個固定的div。到我頂部的頭部，以使它保持原位，但其他元素保持重疊。阻止重疊的固定位置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="https://stackoverflow.com/users/change-password">Change Password</a> 
       <div class="dropdown-divider"></div> 
       <a class="dropdown-item" href="https://stackoverflow.com/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>

來源

2017-06-01 ifengox

可以使用2頂級的DIV - 一個頭，和第二內容。其他任何東西都必須在content 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>

來源

2017-06-01 20:46:19 Nosyara

position: fixed需要的元件從頁面的其餘部分的流動，所以除非你的位置都將重疊否則小心它周圍 - 即使如此，因爲相對於視fixed位置不是文檔，只要用戶滾動所有投注即可。

如果您希望將其保留在頁面的流程中，以使其他元素位於其周圍而不是位於其後面，請勿使用position: fixed（或position: absolute也允許重疊）。

來源

2017-06-01 20:46:19 Adrian

阻止重疊的固定位置div

回答

相關問題