我应该使用CSS、javascript或两者来让这个固定元素扩展父元素吗？

我知道带有

位置：fixed

的元素与带有

位置：relative

（或未指定位置）的父元素的行为类似，这是我关心的问题。我在StackOverflow上看到过同样的问题，但不是同样的问题

我有一个包装器、一个具有相对位置的元素和一个在相对元素内部具有固定位置的元素。当您滚动页面时，具有固定位置的元素应该扩展具有相对位置的元素，但是当您滚动页面时，具有固定位置的元素将离开主容器，而不是扩展。如何使主元素向下推动容器元素，而不是获得偏移

拨弄

这是我的代码：

CSS

HTML

包装器
边栏
主要

当您滚动页面时，固定元素应展开相对元素。不清楚这意味着什么，但是

fixed

position是相对于视口的——并且将元素设置为

position:fixed

必然会将其从正常流（包括其父流）中移除。我同意@KevinBoucher，我也不知道你的意思。我也会说同样的话。@KevinBoucher是正确的，“

固定的

位置是相对于视口的”，元素不能包含在父元素中。现在明白了吗？一个元素有固定的位置，在一个元素中有相对位置，或者没有指定位置。那个编辑并没有真正清除这些内容。你为什么不多解释一下你面临的问题或者你想要达到的目标呢。“固定元素应该在滚动页面时扩展相对元素”对我来说没有多大意义。

body {
    background: #ccc;
}

.wrapper {
    margin: 0 auto;
    height: 600px;
    width: 650px;
    background: green;
}

.sidebar {
    background-color: #ddd;
    float: left;
    width: 300px;
    height: 350px;
    position: relative;
}

.main {
    background-color: yellow;
    width: 200px;
    height: 100px;
    position: fixed;
    margin: auto;
}

<div class="wrapper">wrapper
    <div class="sidebar"> Sidebar
        <div class="main">main</div>    
    </div>    
</div>