固定相对于父容器的位置

Question

我试图将一个元素固定在一个容器中,但固定元素似乎是根据屏幕而不是父元素定位自己.

我的代码:

<div class="relative">
  <div class="absolute">
    <div class="fixed"></div>
  </div>
</div>

Css:

.relative{
  position: relative;
  height:800px;
  width: 400px;
  background: #000;
}

.absolute{
  height:60px;
  width: 60px;
  position: absolute;
  top:0;
  right:0;
  background: #ccc;
  -webkit-transform: translateZ(0); 
}

.fixed{
  height:20px;
  width: 20px;
  background: red;
  position: fixed;
  top:0;
  right:0;
}

我想把红色框固定在灰色框内.但现在当我滚动框滚动并且仍未固定.

现场观看:http://codepen.io/undefinedtoken/pen/abhgc

Answer 1

这里的问题是-webkit-transform.

Chrome无法position:fixed在转化下的元素上呈现.

在这里阅读

您可以尝试删除transformfrom .absolutediv并在计算它的父级宽度后将其设置margin-left为.fixeddiv.在你的情况下它是40px.

例:

.absolute{
  height:60px;
  width: 60px;
  position: absolute;
  top:0;
  right:0;
  background: #ccc;
  /* -webkit-transform: translateZ(0);  */
}

.fixed{
  height:20px;
  width: 20px;
  background: red;
  position: fixed;
  margin-left: 40px;
}

JSFiddle DEMO