Как зафиксировать фиксированное положение и создать липкий заголовок

это мой заголовок и мой css, почему, когда я меняю положение, чтобы зафиксировать его, я хочу, чтобы его исправили, потому что я хочу сделать липкий заголовок вверху **Как зафиксировать фиксированное положение и создать липкий заголовок

<div id="header"> 
     <div class="wrapper"> 
      <div id="logo"> 
       <img src="images/logo.jpg" width="115px" height="114x;"/> 
      </div> 
      <div id="nav"> 
       <ul id="ulstyle"> 
        <li><a href="index.php">HOME</a></li> 
        <li><a href="news.php">NEWS</a></li> 
        <li><a href="gallery.php">GALLERY</a></li> 
        <li><a href="contact.php">CONTACT</a></li> 
        <div class="dropdown"> 
         <li class="dropbtn"><a href="">ABOUT</a></li> 
         <div class="dropdown-content"> 
          <a href="aboutteam.php">Team</a> 
          <a href="aboutproject.php">Project</a> 
         </div> 
        </div> 
       </ul> 
      </div> 
      <img id="searchBtn" src="images/find.png"> 
      <div id="searchbar"> 
       <img id="closeBtn" src="images/close.png"> 
       <input type="text" placeholder="Search..." id="searchinput"> 
      </div> 
     </div> 
    </div> 


body{ 
    min-width:100%; 
    min-height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: auto; 
    position: absolute; 
    background-color: #dcedf9; 
    font-family: 'Ubuntu','PT Sans', 'Roboto', 'Open Sans', sans-serif; 
} 
/* header */ 
#header{ 
    position: relative; 
    min-width: 100%; 
    min-height: 129px; 
    background-color: #002147; 
    padding-top: 1.5625em; 
    padding-bottom: 1em; 
}

тест: это мой заголовок и мой CSS, почему, когда я изменить положение к фиксированному исчезает, я хочу быть исправлен, потому что я хочу сделать липкий заголовок в верхних

источник

2016-09-08 granko ililah

если вы используете фиксированный вам необходимо включить немного больше свойств, чтобы увидеть его работу, а также попробовать с: 'Z-индекс: 100; верх: 0; left: 0' – DaniP

также почему вы установили свое положение тела абсолютным, что не имеет смысла, если вы хотите переместить контент на свое тело, вы можете просто сделать это ^^ –

@RudiUrbanek Я знаю это, но когда я удаляю это на теге тела, а затем, когда я увеличиваю масштаб в браузере, навигационном меню, заголовке и т. д., выходите из содержимого, idk, как объяснить –

Если вы используете position: fixed, вам необходимо установить элемент top: 0, z-index: 9999 и left: 0 для стилей cky header.

источник

2016-09-08 15:54:39 ssabin

Может быть ниже поможет, вы можете построить над этим:

body{ 
 
    min-width:100%; 
 
    min-height: 900px; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: auto; 
 
    position: absolute; 
 
    background-color: #dcedf9; 
 
    font-family: 'Ubuntu','PT Sans', 'Roboto', 'Open Sans', sans-serif; 
 
} 
 
/* header */ 
 
#header{ 
 
    position: fixed; 
 
    min-width: 100%; 
 
    height: 70px; 
 
    background-color: #002147; 
 
    overflow: hidden; 
 
    box-shadow: 0px 0px 5px 5px #313131; 
 
} 
 
.wrapper{ 
 
    display: flex;; 
 
} 
 
#ulstyle{ 
 
    display: flex; 
 
    flex-direction: column wrap; 
 
} 
 
#ulstyle>li{ 
 
    margin-left: 5px; 
 
} 
 
.body-content{ 
 
    height: 900px; 
 
    background-color: yellow; 
 
} 
 
.body-content-red{ 
 
    height: 900px; 
 
    background-color: red; 
 
}

<div id="header"> 
 
     <div class="wrapper"> 
 
      <div id="logo"> 
 
       <img src="images/logo.jpg" width="115px" height="70px;"/> 
 
      </div> 
 
      <div id="nav"> 
 
       <ul id="ulstyle"> 
 
        <li><a href="index.php">HOME</a></li> 
 
        <li><a href="news.php">NEWS</a></li> 
 
        <li><a href="gallery.php">GALLERY</a></li> 
 
        <li><a href="contact.php">CONTACT</a></li> 
 
        <div class="dropdown"> 
 
         <li class="dropbtn"><a href="">ABOUT</a></li> 
 
         <div class="dropdown-content"> 
 
          <a href="aboutteam.php">Team</a> 
 
          <a href="aboutproject.php">Project</a> 
 
         </div> 
 
        </div> 
 
       </ul> 
 
      </div> 
 
      <img id="searchBtn" src="images/find.png"> 
 
      <div id="searchbar"> 
 
       <img id="closeBtn" src="images/close.png"> 
 
       <input type="text" placeholder="Search..." id="searchinput"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="body-content"> 
 
    Some content 
 
    </div> 
 
    <div class="body-content-red"> 
 
    Some conten 
 
    </div>

источник

2016-09-08 16:10:59 Knitesh

Как зафиксировать фиксированное положение и создать липкий заголовок

ответ

Смежные вопросы