为什么位置固定的部分与另一部分一起移动？

问题描述：

正如您通过代码段所看到的，“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; 
}

你能为此创建一个jsfiddle吗？ – Giri

我该怎么做？ – Pareod

在https://jsfiddle.net/中创建一个，然后在此保存并发布链接。 – Giri

答

我注意到的第一件事是固定元件有一个边缘崩溃。 Google如何解决边缘折叠问题。我补充说，

padding-top: 1px;

身体。

接下来我加入，

height: 2000px的身体让身体可以滚动，你可以看到position:fixed中发挥

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

我在寻找答案时看到了边缘崩溃，但有很多种不同的情况，我无法将解决方案转化为我的问题。我仍然不确定为什么添加填充可以解决这个问题。由于公共区域没有设置页边距，并且与另一个区域位于不同的图层上，因此不应该位于页面的顶部吗？ – 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>

你还需要做什么？ –

虽然这并未使用固定功能。我知道如何去做亲戚。 – 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

内容必须有一个边距（或填充），以便它不会被固定在元素下面。

看起来，如果你从头部删除'top：0;'，那么你遇到了同样的问题。这是为什么？ – Pareod

[这里是一些见解]（http://stackoverflow.com/questions/24560958/how-does-margin-of-separate-element-affect-position-of-fixed-element）。 – vkopio

为什么位置固定的部分与另一部分一起移动？

相关推荐