html - 在滚动页面中创建固定 float 的div

Question

在这个例子中，我需要黄色的 div 来保持固定而不是随着页面滚动。和红色的 div 显示在黄色 div 下方，中间有一些空白。当红色 div 滚动时，它应该在黄色 div 下方滚动，并且黄色和红色 div 之间应该有空白。请帮忙解决这个问题。

.fixspan
{
    width:100%;
    position:fixed;
    background-color:yellow;
}
.scrollingdiv
{
    background-color:red;
}

<div class='fixspan'>
    <span>This should not scroll with the page.</span>
</div>
<div class='scrollingdiv'>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
    <p>This is to expand content of the page</p>
</div>

Answer 1

是this你在找什么？

CSS:

.fixspan {
  width: 100%;
  position: fixed;
  background-color: yellow;
  position: fixed;
  right: 0;
  top: 0;
  width: 10%;
  height: 100px;
}

.scrollingdiv {
  background-color: red;
  width: 88%;
}

我刚刚添加了顶部、右侧、宽度和高度属性。否则你的黄色不知道它应该“停留”在哪里。