爲什麼位置固定的部分與另一部分一起移動？

正如您通過代碼段所看到的，「common」類的部分設置爲固定位置，但它似乎與其他部分相關。我該如何修復它，以便公共部分相對於瀏覽器是固定的？

的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或正常化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

爲什麼位置固定的部分與另一部分一起移動？

回答

相關問題