Блог

Главная - Вопросы по программированию - Создание DIV, перекрывающего фиксированную панель навигации начальной загрузки вверху

Создание DIV, перекрывающего фиксированную панель навигации начальной загрузки вверху

#html #css

#HTML #css

Вопрос:

Я пытаюсь расположить DIV поверх фиксированной панели навигации начальной загрузки вверху. Я пробовал z-index и абсолютное позиционирование и т. Д., Но независимо от того, что я делаю, панель навигации начальной загрузки, похоже, имеет наивысший приоритет.

Вот codepen: http://codepen.io/anon/pen/kkRLKA

Вот мой код:

 <head>
    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="style.css" type="text/css">

    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div id="navbar" class="collapse navbar-collapse"> 
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Our Mission</a></li>
                    <li><a href="#">Who We Are</a></li>
                    <li><a href="#">What We Have Done</a></li>
                    <li><a href="#">The State of Things</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="LogoContainer">

    </div>

    <div class="jumbotron">

    </div>  
</body>

И CSS:

 body { position:relative; }

div#navbar > ul li
{
    padding-right:5vw;
}

@media only screen and (max-width: 1230px)
{
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}



.LogoContainer
{
    width:200px;
    height:200px;
    background-color:blue;
    border:1px solid red;
    position:absolute;
    left:5%;
    top:0;
    z-index:1;
}


.jumbotron
{
    height:70vh;
    margin-bottom:0;
    position:relative;
}

div.donation-form
{
    border:1px solid red;
    width:19%;
    padding:7vh 0 5vh 0;
    position:absolute;
    right:5%;
    bottom:-10vh;
}

div.donation-form input[type=text]
{
    display:block;
    width:60%;
    height:50px;
    margin:0 auto 8px auto;
    padding-left:15px;
}

div.donation-form input[type="submit"]
{
    display: block;
    width:60%;
    height:60px;
    margin:20px auto 0 auto;
    background-color: darkgray;
    border:none;
}

div.donation-form p
{
    font-size:1.1rem;
    text-align:center;
}

Как вы можете видеть, верхняя 1/4 синего прямоугольника скрыта панелью навигации. Как мне сделать так, чтобы она перекрывала панель навигации? Я также пробовал z-index: 999999999!важно, но это бесполезно.

Комментарии:

1. z-index выполняет работу, как вы можете видеть здесь , поэтому вы можете удалить вопрос. Просто установите для него значение больше 1030.

Ответ №1:

Это выглядит довольно странно во фрагменте, но проверьте это на jsfiddle. Это то, что вы хотели?

https://jsfiddle.net/t8j6pgg8/

 body {} div#navbar > ul li {
  padding-right: 5vw;
}
@media only screen and (max-width: 1230px) {
  .navbar-header {
    float: none;
  }
  .navbar-left,
  .navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in {
    display: block !important;
  }
}
.LogoContainer {
  width: 200px;
  height: 200px;
  background-color: blue;
  border: 1px solid red;
  position: absolute;
  left: 5%;
  top: 0;
  z-index: 9999;
}
.jumbotron {
  height: 70vh;
  margin-bottom: 0;
  position: relative;
}
div.donation-form {
  border: 1px solid red;
  width: 19%;
  padding: 7vh 0 5vh 0;
  position: absolute;
  right: 5%;
  bottom: -10vh;
}
div.donation-form input[type=text] {
  display: block;
  width: 60%;
  height: 50px;
  margin: 0 auto 8px auto;
  padding-left: 15px;
}
div.donation-form input[type="submit"] {
  display: block;
  width: 60%;
  height: 60px;
  margin: 20px auto 0 auto;
  background-color: darkgray;
  border: none;
}
div.donation-form p {
  font-size: 1.1rem;
  text-align: center;
} 
 <head>
  <title></title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="style.css" type="text/css">

  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Home</a>
          </li>
          <li><a href="#">Our Mission</a>
          </li>
          <li><a href="#">Who We Are</a>
          </li>
          <li><a href="#">What We Have Done</a>
          </li>
          <li><a href="#">The State of Things</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="LogoContainer">

  </div>

  <div class="jumbotron">

  </div>


</body>

Ответ №2:

Поместите div с вашим классом logo здесь (3-я строка кода) и, конечно, удалите предыдущий div с классом logo.

 <body>
<nav class="navbar navbar-default navbar-fixed-top">    
<div class="LogoContainer"></div>
<div class="container-fluid">
Метки: ,