位置固定在父 div 内

Question

我正在尝试将 div 位置固定在父 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

固定定位仅适用于根元素 (html)，不适用于任何父元素。如果您想在父元素中定位某些内容，请使用 position:absolute 并确保父元素具有 position:relative（或 position:absolute）。

Answer 2

使用 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>

运行片段全屏查看！

Answer 3

您的 html 应该是：

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

你的css应该是：

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

位置固定在父 div 内

position fixed inside parent div

html

css

css-position

fixed