Question

我在一个相对定位的div里面有一个固定的div。我希望将div固定在页面顶部并包含在我相对定位的父级中。

此用例的一个常见示例是两列布局中的粘性网站侧边栏。

据我了解。在我的固定div上设置top: 0会将其修复到顶部。在我的固定div上设置margin-left: 0会将其与相对定位的父对齐。

除了Safari（版本＆lt; 10）以外，所有浏览器都可以正常使用。有没有办法解决这个不涉及用户代理嗅探的问题。

这是一个简单的小提琴，说明了以下隔离问题： http://jsfiddle.net/vgc1ekbg/4/

这是在两栏网站布局的背景下说明问题的另一个小提琴：http://jsfiddle.net/dpmj3y0n/1/

Answer 1

根据评论中分享的最后小提琴编辑。

＆＃13;

* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 960px;
  height: 2000px;
  margin: 0 auto;
  text-align: center;
  /* line-height: 580px; */
}
.layout {
  height: 2000px;
  /*padding-left: 20px;*/
  /* padding-right: 350px; */
  /*margin-right: 192px;*/
}
.layout:before, .layout:after {
  content: "";
  display: table;
}
.layout:after {
  clear: both;
}
.col-main {
  width: calc(100% - 184px);
  margin-left: -8px;
  margin-top: -8px;
  height: 580px;
  float: left;
  position: relative;
  left: 200px;
  background-color: #f16529;
  line-height: 580px;
}
.col-sub {
  /* margin-right: -100%; */
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  line-height: 580px;
  /* height: 580px; */
  background-color: #f0dddd;
  float: left;
}

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100px;
  overflow: hidden;
  z-index: 100;
  background-color: gray;
  color: red;
  line-height: 100px;
}

＆＃13;

<div class="wrapper">
  <div class="layout">
    <div class="col-main">Main Content</div>
    <div class="col-sub">Sidebar Content
      <div class="sticky">
          Sticky Content
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

如果您打算居中对齐，可以left: 50%;和transform: translateX(-50%);使用.column和.sticky

http://jsfiddle.net/vgc1ekbg/5/

相对父级内的固定div在Safari中无法正常工作

2 个答案: