位置が固定されているセクションが他のセクションと一緒に動くのはなぜですか？

注：テストするときに、完全なページをクリックします。位置が固定されているセクションが他のセクションと一緒に動くのはなぜですか？

スニペットで見ることができるように、クラス「共通」のセクションを固定位置に設定し、他の部分に比べてであるように思われます。共通部分がブラウザに対して固定されるように修正するにはどうすればよいですか？

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;

を追加しました。

次の体がスクロールすることができますし、私はあなたがややYouTubesレイアウトを表したレイアウトをしたい推測してい劇中position:fixed

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

出典

2016-07-15 05:02:54 Giri

私は答えを探しているうちにマージンが崩壊しているのを見たことがありますが、解決策を自分の問題に変換できないほど多くの種類の状況がありました。私はまだパディングを追加することがなぜ問題を解決するのかよく分かりません。共通セクションにはマージンが設定されておらず、他のセクションとは異なるレイヤーになっているので、それはページの上部にあってはなりませんか？ – Pareod

私はブートストラップやノーマライズ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

を見ることができるので、私は体に、

height: 2000pxを追加しました（固定ヘッダーとサイドバー付き）。固定された位置を持っている

要素は、ページの残りの部分は、それらの要素も存在しないだろうかのようにレンダリングするように、ページから「持ち上げ」されています。あなたが持っている心の中でそれは少しあなたのレイアウトを調整します

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

位置が固定されているセクションが他のセクションと一緒に動くのはなぜですか？

答えて

関連する問題