1

I know that a an element with position:fixed acts like its parent element with position:relative (Or no position specified) doesn't exist, and that's my concern. I've seen the very same question being asked here on StackOverflow, but not the very same problem.

I have a wrapper, an element with relative position, and an element with a fixed position inside the relative element. The element with fixed position should expand the element with relative position as you scroll the page, but what's happening is that when you scroll the page, the element with fixed position will go out of the main container, instead of expanding. How can I make the main element push the container element bellow, instead of getting an offset?

Fiddle

http://jsfiddle.net/T2PL5/515/

Here my code:

CSS

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;
}

HTML

<div class="wrapper">wrapper
    <div class="sidebar"> Sidebar
        <div class="main">main</div>    
    </div>    
</div>
9
  • 2
    The fixed element should expand the relative element, as you scroll the page. It's not clear what this means, but fixed position is relative to the viewport -- and setting an element to position:fixed necessarily removes it from the normal flow (including its parent) May 11, 2015 at 23:33
  • I agree with @KevinBoucher, I don't know what you mean by that either. Was going to say the same thing.
    – JoeMoe1984
    May 11, 2015 at 23:35
  • @KevinBoucher is correct, "fixed position is relative to the viewport" and the element cannot be contained within the parent. May 11, 2015 at 23:38
  • Got it now? One element with fixed position, inside a an element with relative position, or no position specified. May 11, 2015 at 23:38
  • That edit didn't really clear things up. Why don't you explain more about the problem you are having or what you are trying to achieve. "The fixed element should expand the relative element, as you scroll the page" doesn't make much sense to me.
    – JoeMoe1984
    May 11, 2015 at 23:38

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.