html - 位置固定在父 div 内

Question

我正在尝试将一个 div positiong 固定在父 div 中。当我将固定的 div 设置为 top 0 时，它位于 body 的顶部。

固定的div应该随页面滚动

这是我的代码示例:

    <div class="container">

    <div class="col-sm-8">
        <p>content</p>
    </div>

    <div class="col-sm-4">                  
        <div id="sidebar">
            <div class="inner">
                <ul>
                <li>link</li>
                <li>link</li>
                <li>link</li>
                <li>link</li>
                </ul>
            </div>
        </div>                
    </div>

</div>

<style>

.container {
    width: 1170px;
    display: table;
}

.col-sm-8, col-sm-4 {
    position: relative;
    float: left;
}

.inner {
    position: fixed;
    top: 0;
}

</style>

example screen layout

Answer 1

使用 position fixed with margin 将允许您相对于其父元素定位元素。

* {
  height: 2000px;
}
section {
  width: 600px;
  margin: 100px auto;
}
div {
  width: 70%;
  background: grey;
  float: left;
}
aside {
  width: 30%;
  background: orange;
  float: right
}
.inner {
  position: fixed;
  width: 100px;
  height: 60px;
  background: red;
  margin: 100px 0 0 40px;
}

<section>
  <div></div>
  <aside>
    <div class="inner"></div>
  </aside>
</section>

全屏运行代码片段以查看!