固定位置忽略父母？

Question

我在position: absolute position:fixed和position:fixed滚动之间交替了一个div，您可以在此处看到我的损坏代码（JSfiddle）： http : //jsfiddle.net/g9NVj/2/

所涉及的区域是粉色和蓝色框，它们在滚动时会改变颜色。 正确的宽度和位置（以及我想要的结果）是粉红色的框，蓝色的框已损坏。 蓝色框（ .fix ）更改为position:fixed ，似乎拥抱了窗口的最左侧，并且获得了不同的宽度（在菜单侧栏的后面），而不是使用其父级。

我尝试过添加相对于父对象的position：relative，但不能解决问题。

这是小提琴的关键区域的片段，但请查看JSFiddle以获取完整代码：

.content {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #CCD5D5;
}

.c-2 {
    width: 50%;
    min-height:1px;
    float:left;
    overflow: hidden;
    /*position: relative;  TRIED THIS BUT DOESN"T WORK */
}

.c-2.last {
    padding: 80px;
}

.sticky {
    z-index: -1;
    background: #e4f;
}

.fix {
    position:fixed;
    width:50%;
    top: 0;
    left: 0;
    background: #34e;
}

.abs {
    position:absolute;
    bottom:0;
    width:50%;
    left:0;
    background: #e4f;
}

Answer 1

那是因为position:fixed是相对于浏览器窗口的，所以将position:relative添加到父div并没有帮助。 如果要.fix div相对于父div ，则应为其指定一个position:absolute并给父div一个position:relative 。