html - 顶部标签有效，但底部标签无效。在 Codepen 中编写代码

Question

body {
  background-color: black;
}

.inner{
  margin-left:400px;
  color:white;
  width:650px;
  height:450px;

  top:130px;
  position:fixed;
  padding-left:30px;
  padding-right:30px;
  text-align:center;
  background-color:grey;
}

.outer {
  height:500px;
  width:1000px;
  top:100px; 
   bottom:0px;
  margin-left:260px;
  position:fixed;

  background-color:white;
}

<div class="outer">
</div>
<div class="inner">
    <img />
    <h2>RK</h2>
    <h5>wtv@wtc</h5>
    <a>
      Github 
    </a>

    <p>blah blah blah </p>

    <br>

    <p> blah blah blah</p>
</div>

在 outer 类中，无论我如何更改底部，它都不会改变结果网页上的任何内容。我认为这与 block 和内联有关，但我真的想弄清楚我的概念。有什么建议吗？

Answer 1

“问题”是在使用 position:fixed 时不能同时使用 top 和 bottom 属性

您可以“偏移”与屏幕底部或顶部相关的元素。如果您删除 top:100px，则 div 应该一直位于屏幕底部。您还可以使用 left 属性并设置它而不是当前的 margin-left 属性。

您可以阅读更多关于不同定位选项的信息 here .