Fluid width fixed position

Question

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?

position: fixed is always and always "relative" to the browser window/view port and never "relative" to a positioned (absolute or relative) parent/ancestor. — Jawad, Sep 03 '12 at 20:44
http://stackoverflow.com/questions/7846161/fixed-positioned-div-within-a-relative-parent-div — Jawad, Sep 03 '12 at 20:47
http://stackoverflow.com/questions/6976048/fixed-position-layer-div-in-relation-to-its-parent-div-with-overflowauto — Jawad, Sep 03 '12 at 20:47
http://stackoverflow.com/questions/5873565/position-fixed-relative-to-parent-div — Jawad, Sep 03 '12 at 20:48
http://stackoverflow.com/questions/6794000/css-fixed-position-but-relative-to-container — Jawad, Sep 03 '12 at 20:48
http://stackoverflow.com/questions/11431358/how-to-make-an-element-with-fixed-position-relative-to-its-parent-not-the-whole — Jawad, Sep 03 '12 at 20:49
I also used @Jawad 3rd answer ( http://stackoverflow.com/questions/5873565/position-fixed-relative-to-parent-div ) — Buttle Butkus, Aug 12 '13 at 21:55
just because you want an element to have a non changing height / vertical position does mean that the element has to be marked as fixed. the fiddle provided by @Ilan Biala clearly demonstrates a working example — Code Uniquely, Nov 21 '13 at 09:08

score 7 · Answer 1 · answered Oct 08 '14 at 20:39

7

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

That should do the trick.

answered Oct 08 '14 at 20:39

djones

2,338
1
20
25

1

Was having this issue, and this actually solved it. For reference, the `inherit` property is _inheriting_ the width set by its nearest parent. – Joseph Shambrook Jun 17 '15 at 08:48

score 4 · Answer 2 · answered Jan 20 '14 at 08:53

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.

score 3 · Answer 3 · answered Jul 10 '15 at 10:01

3

Use this :

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

}

answered Jul 10 '15 at 10:01

Left and right here are in relation to the document, not the container div as is desired though? – EoghanM Dec 05 '17 at 11:39

score 1 · Answer 4 · answered Jun 20 '16 at 00:53

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

score 0 · Answer 5 · answered Sep 03 '12 at 22:31

0

You can take a look at this jsfiddle that i made that illustrates the fix for your problem, you can use this code exactly as it does what you want.

answered Sep 03 '12 at 22:31

Ilan Biala

3,319
5
36
45

3

How is your JSFiddle related to position:fixed? – Dan Jun 17 '13 at 05:04
I gave a fix, I didn't say it relates to `position:fixed;`. It's related to his problem and my answer proposes a solution. – Ilan Biala Jan 10 '14 at 20:56

score 0 · Answer 6 · edited Jan 28 '14 at 06:53

0

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

edited Jan 28 '14 at 06:53

Baby Groot

4,637
39
52
71

answered Jan 28 '14 at 06:34

AndreiD

57
5

This doesn't hold anymore once `transform` is applied in modern browsers... – T J Nov 02 '16 at 15:15

score 0 · Answer 7 · answered Feb 08 '14 at 05:41

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

answered Feb 08 '14 at 05:41

Saad Shahd

963
7
10

Fluid width fixed position

7 Answers7

Linked