Почему участок с фиксированным положением позиционируется с другим разделом?

Примечание: нажмите полную страницу при тестировании.Почему участок с фиксированным положением позиционируется с другим разделом?

Как вы можете видеть по фрагменту, раздел с классом «общий» установлен в фиксированное положение, но, по-видимому, он относится к другому разделу. Как исправить это, чтобы общий раздел был зафиксирован относительно браузера?

Jsfiddle:

https://jsfiddle.net/my1c76vb/?utm_source=website&utm_medium=embed&utm_campaign=my1c76vb

Код:

HTML5:

<?php session_start(); ?> 
<!DOCTYPE html> 

    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
    <title>Log in</title> 
    <body> 
     <section class="common"> 
     <header> 
     <img src="resources/header.png" alt="Sqeaking Duck"/> 
     </header> 

     <aside class="menu"> 
     <h3>Guest</h3> 
     <hr> 
     <nav> 
      <ul> 
      <li><a href="home.php">Home</a></li> 
      <li><a href="login.php">Log in</a></li> 
      <li><a href="register.php">Register</a></li> 
      </ul> 
     </nav> 
     </aside> 
    </section> 
    <section class="login"> 
     <form action="loginManager.php" method="post"> 
     <fieldset> 
      <legend>Log in</legend> 
      User: <input type="text" name="username" value=""> 
      <span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['userErr'] : '';?></span><br> 
      Password: <input type="password" name="password" value=""> 
      <span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['passErr'] : '';?></span><br> 
      <input type="submit" name="submit" value="Submit"> 
     </fieldset> 
     </form> 
     <p><span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['generalErr'] : '';?></span></p> 
    </section> 
    </body>

CSS:

/*Common pages */ 
.common { 
    z-index: 1; 
    margin-top: 10px; 
    position: fixed; 
    width: 100%; 
} 

header { 
    width: 100%; 
    text-align: center; 
    background-color: CornflowerBlue; 
} 

.menu { 
    margin-top: 25px; 
    width: 80px; 
    background-color: black; 
    text-align: center; 
} 

.menu h3 { 
    color: white; 
    display: inline-block; 
    margin: 0; 
    padding-top: 5px; 
} 

.menu hr {border-color: white;} 

.menu nav { 
    display: inline-block; 
    text-align: left; 
    width: 100% 
} 

.menu ul { 
    list-style: none; 
    padding: 0px 0px 0px 10px; 
    margin: 0; 
} 

.menu li { 
    padding-bottom: 10px; 
} 

.menu a { 
    text-decoration: none; 
    color: white; 
} 

/*Log in page*/ 
.login { 
    text-align: center; 
    z-index: 0; 
    margin-top: 300px; 
} 

/*General*/ 
body { 
    background-color: grey; 
}

источник

2016-07-15 Pareod

Вы можете создать jsfiddle для этого? – Giri

Как это сделать? – Pareod

создайте его в https://jsfiddle.net/ и сохраните и разместите ссылку здесь. – Giri

Первое, что я заметил, это то, что фиксированный элемент имеет крах-крах. Google, как исправить крах. Я добавил,

padding-top: 1px;

к телу.

Далее я добавил,

height: 2000px к телу, так что тело может прокручивать, и вы можете увидеть position:fixed в игре

https://jsfiddle.net/my1c76vb/1/

источник

2016-07-15 05:02:54 Giri

Я видел крах-крах, когда я искал ответ, но было так много разных ситуаций, что я не мог перевести решение моей проблемы. Я все еще не уверен, почему добавление дополнений устраняет проблему. Поскольку общий раздел не имеет установленного поля и находится на другом уровне, чем другой раздел, не должен ли он быть наверху страницы независимо? – Pareod

Вот почему я использую bootstrap или Normalizing css, что эти ситуации уже решены великими разработчиками. Я называю этих разработчиков легендами. – Giri

/*Common pages */ 
 
.common { 
 
    z-index: 1; 
 
    margin-top: 10px; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    text-align: center; 
 
    background-color: CornflowerBlue; 
 
} 
 

 
.menu { 
 
    margin-top: 25px; 
 
    width: 80px; 
 
    background-color: black; 
 
    text-align: center; 
 
} 
 

 
.menu h3 { 
 
    color: white; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding-top: 5px; 
 
} 
 

 
.menu hr {border-color: white;} 
 

 
.menu nav { 
 
    display: inline-block; 
 
    text-align: left; 
 
    width: 100% 
 
} 
 

 
.menu ul { 
 
    list-style: none; 
 
    padding: 0px 0px 0px 10px; 
 
    margin: 0; 
 
} 
 

 
.menu li { 
 
    padding-bottom: 10px; 
 
} 
 

 
.menu a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
/*Log in page*/ 
 
.login { 
 
    text-align: center; 
 
    z-index: 0; 
 
    margin-top: 320px; 
 
} 
 

 
/*General*/ 
 
body { 
 
    background-color: grey; 
 
}

<?php session_start(); ?> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
    <title>Log in</title> 
 
    </head> 
 

 
    <body> 
 
    <section class="common"> 
 
     <header> 
 
     <img src="resources/header.png" alt="Sqeaking Duck"/> 
 
     </header> 
 

 
     <aside class="menu"> 
 
     <h3>Guest</h3> 
 
     <hr> 
 
     <nav> 
 
      <ul> 
 
      <li><a href="home.php">Home</a></li> 
 
      <li><a href="login.php">Log in</a></li> 
 
      <li><a href="register.php">Register</a></li> 
 
      </ul> 
 
     </nav> 
 
     </aside> 
 
    </section> 
 
    <section class="login"> 
 
     <form action="loginManager.php" method="post"> 
 
     <fieldset> 
 
      <legend>Log in</legend> 
 
      User: <input type="text" name="username" value=""> 
 
      <span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['userErr'] : '';?></span><br> 
 
      Password: <input type="password" name="password" value=""> 
 
      <span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['passErr'] : '';?></span><br> 
 
      <input type="submit" name="submit" value="Submit"> 
 
     </fieldset> 
 
     </form> 
 
     <p><span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['generalErr'] : '';?></span></p> 
 
    </section> 
 
    </body> 
 
</html>

источник

2016-07-15 04:15:01

Что еще вам нужно сделать? –

Это не использует фиксированные функции. Я знаю, как относиться. – Pareod

Я предполагаю, что вы хотите, макет, который несколько представляет YouTubes макет (с фиксированным заголовком и боковой панелью).

Элементы, имеющие фиксированное позиционирование, «поднимаются» со страницы, так что остальная часть страницы отображается так, как если бы эти элементы даже не были там. Это в виду, вы должны настроить ваш макет немного:

CSS

* { 
    padding: 0; 
    margin: 0; 
} 

header { 
    background-color: #222; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 150px; 
} 

.container { 
    margin-top: 150px; /*Same as header height*/ 
    margin-left: 150px; /*Same as menu width*/ 
} 

.menu { 
    background-color: #333; 
    position: fixed; 
    left: 0; 
    width: 150px; 
} 

.content { 
    padding: 10px; 
}

HTML

<header></header> 

<section class="container"> 
    <aside class="menu"> 
    <!-- Menu here --> 
    </aside> 

    <div class="content"> 
    <!-- Content here --> 
    </div> 
</section>

Here is a demo

Содержимое должно иметь запас (или дополнение), чтобы он не был захоронен под фиксированными элементами.

источник

2016-07-15 05:19:13 vkopio

Похоже, если вы удалите 'top: 0;' из заголовка, тогда вы получите ту же проблему, что и я. Почему это? – Pareod

[Вот несколько прозрений] (http://stackoverflow.com/questions/24560958/how-does-margin-of-separate-element-affect-position-of-fixed-element). – vkopio

Почему участок с фиксированным положением позиционируется с другим разделом?

ответ

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