20

Imagine:

<div class="outer"> <div class="inner"> </div> </div>

Where:

  • .outer is part of a column structure, and its width is a percentile and therefore fluid.
  • .inner represents a fixed position element that should fill with a 100% width the .outer element. However its position vertically remains the same, therefore fixed.

I’ve tried to implement this layout with the following CSS:

.outer { position: relative; width: %; } .inner { position: fixed; width: 100%; }

However, .inner does not calculate its width as a percentage of its relative parent. Instead it fills the full width of the window/document. Attempting any left or right properties result in the same parent-ignoring qualities.

Is there any way around this?

Improve this question
10
  • 5
    position: fixed is always and always "relative" to the browser window/view port and never "relative" to a positioned (absolute or relative) parent/ancestor. Commented Sep 3, 2012 at 20:44
  • "Is there any way around this?" Commented Sep 3, 2012 at 20:45
  • stackoverflow.com/questions/7846161/… Commented Sep 3, 2012 at 20:47
  • 3
    stackoverflow.com/questions/5873565/… Commented Sep 3, 2012 at 20:48
  • 1
    The third solution of @Jawad is actually brilliant ! Commented May 30, 2013 at 15:34

6 Answers 6

Reset to default
7 
.outer { position: relative; width: %; } .inner { position: fixed; width: inherit; }

That should do the trick.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Was having this issue, and this actually solved it. For reference, the inherit property is inheriting the width set by its nearest parent.
4

position: fixed is always relative to the window/browser, thus it cannot be used to solve your problem. Fixed positioning removes the element from the natural order of the DOM, and thus does not remain within your outer div anymore, hence why it takes the full width of the browser and not of your container. What you need to use is position: absolute to place .inner relative to .outer. You'll be able to position your element as well as have its width be contained by the .outer div.

Improve this answer

Comments

3

Use this :

.inner { position: fixed; left:0; right:0;

}

Improve this answer

1 Comment

Left and right here are in relation to the document, not the container div as is desired though?
1

Fixed elements take only absolute values as width. If your parent container is fluid (width is a percentage), you need to set the width of the fixed element dynamically. You need to get the width of the wrapping container and set it on the sticky element.

CSS

.outer {width: 25%;} .inner {position: fixed;}

JS

var fixedWidth = $('.outer').css('width'); $('.inner').css('width', fixedWidth);

Additionally, you can add an event listener in case window resizes.

JS

window.addEventListener('resize', resize); function resize() { var fixedWidth = $('.outer').css('width'); $('.inner').css('width', fixedWidth); }
Improve this answer

Comments

0

position:fixed is always relative to viewport/browser window, not to ancestors.

Improve this answer

1 Comment

This doesn't hold anymore once transform is applied in modern browsers...
0

What about using something like this fiddle ?

.outer { width: 20%; height: 1200px; margin-left: 5%; float: left; } .inner { height: 200px; position: fixed; top: 0; background: orange; right: 75%; left: 5%; }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.