Css 为什么将“位置”设置为“固定”的部分与其他部分一起移动？_Css_Css Position

Css 为什么将“位置”设置为“固定”的部分与其他部分一起移动？

css

Css 为什么将“位置”设置为“固定”的部分与其他部分一起移动？,css,css-position,Css,Css Position,注意：测试时请单击完整页面正如您在代码段中看到的，类为“common”的部分被设置为固定位置，但它似乎是相对于其他部分的。如何修复它，使公共部分相对于浏览器是固定的 Jsfiddle：代码： HTML5： <?php session_start(); ?> <!DOCTYPE html> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <title>

注意：测试时请单击完整页面

正如您在代码段中看到的，类为“common”的部分被设置为固定位置，但它似乎是相对于其他部分的。如何修复它，使公共部分相对于浏览器是固定的

Jsfiddle：

代码：

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>

/*常用页面*/
.普通的{
z指数：1；
边缘顶部：10px；
位置：相对位置；
宽度：100%；
}
标题{
宽度：100%；
文本对齐：居中；
背景颜色：矢车菊蓝；
}
.菜单{
边缘顶部：25px；
宽度：80px；
背景色：黑色；
文本对齐：居中；
}
.菜单h3{
颜色：白色；
显示：内联块；
保证金：0；
垫面：5px；
}
.menu hr{边框颜色：白色；}
.菜单导航{
显示：内联块；
文本对齐：左对齐；
宽度：100%
}
.菜单ul{
列表样式：无；
填充：0px 0px 0px 10px；
保证金：0；
}
李先生{
垫底：10px；
}
.菜单a{
文字装饰：无；
颜色：白色；
}
/*登录页面*/
.登录{
文本对齐：居中；
z指数：0；
边缘顶部：320px；
}
/*一般的*/
身体{
背景颜色：灰色；
}


登录




登录
用户：


密码：

/*常用页面*/
.普通的{
z指数：1；
边缘顶部：10px；
位置：相对位置；
宽度：100%；
}
标题{
宽度：100%；
文本对齐：居中；
背景颜色：矢车菊蓝；
}
.菜单{
边缘顶部：25px；
宽度：80px；
背景色：黑色；
文本对齐：居中；
}
.菜单h3{
颜色：白色；
显示：内联块；
保证金：0；
垫面：5px；
}
.menu hr{边框颜色：白色；}
.菜单导航{
显示：内联块；
文本对齐：左对齐；
宽度：100%
}
.菜单ul{
列表样式：无；
填充：0px 0px 0px 10px；
保证金：0；
}
李先生{
垫底：10px；
}
.菜单a{
文字装饰：无；
颜色：白色；
}
/*登录页面*/
.登录{
文本对齐：居中；
z指数：0；
边缘顶部：320px；
}
/*一般的*/
身体{
背景颜色：灰色；
}


登录




登录
用户：


密码：

我注意到的第一件事是固定元素的边距折叠。谷歌如何修复利润崩溃。我补充说,

padding-top: 1px;

给身体

接着我补充说,

高度：2000px

到车身，这样车身可以滚动，您可以看到

位置：固定
我注意到的第一件事是固定元素有一个边距崩溃。谷歌如何修复利润崩溃。我补充说,
padding-top: 1px;

给身体
接着我补充说,
高度：2000px
到车身，这样车身可以滚动，您可以看到位置：固定
我猜您想要一个在某种程度上代表YouTube布局的布局（带有固定标题和侧栏）
具有固定位置的元素从页面“提升”，因此页面的其余部分呈现为这些元素甚至不存在。请记住，您必须稍微调整布局：
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>




内容必须有一个边距（或填充），这样它就不会被固定的元素覆盖。
我猜您想要一个在某种程度上代表YouTube布局的布局（带有固定的标题和侧栏）
具有固定位置的元素从页面“提升”，因此页面的其余部分呈现为这些元素甚至不存在。请记住，您必须稍微调整布局：
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>




内容必须有一个边距（或填充），这样它就不会被固定元素覆盖。
你能为此创建一个JSFIDLE吗？在中创建一个，保存并在此处发布链接。我创建了一个JSFIDLE。正文需要一个高度。例如，添加高度：1000px；在css中创建主体，看看这是否是您所追求的。高度可能比浏览器窗口高。这似乎没有解决问题。你能为此创建一个JSFIDLE吗？在中创建一个，保存并在此处发布链接。我创建了一个JSFIDLE。主体需要一个高度。例如，添加高度：1000px；在css中创建主体，看看这是否是您所追求的。可能比浏览器窗口的高度高。这似乎并没有修复它。您还需要做什么？但这并没有利用固定的功能。我知道如何做相对。你还需要做什么？这并没有利用固定的功能。我知道如何做相对论。我在寻找答案时看到了利润率的崩溃，但有太多不同的情况，我无法找到解决问题的方法。我仍然不知道为什么添加填充可以解决这个问题。因为公共部分没有边距集，并且与其他部分位于不同的层上，所以它不应该位于页面的顶部吗？这就是我使用引导或规范化css的原因，这些情况已经被伟大的开发人员解决了。我把那些开发者称为传奇。在我寻找答案的时候，我看到利润率暴跌，但有太多不同的情况，我无法找到解决问题的办法。我仍然不知道为什么添加填充可以解决这个问题。既然公共部分没有边距集，并且与其他部分位于不同的层上，那么它不应该位于页面的顶部吗？这就是为什么我使用引导或规范化css的原因，gre已经解决了这些问题