How can I position: fixed an element relative to the parent container?

Question

I have a container that will have a dynamic height and 100% width. I am trying to place an X to close the modal I have made. But I am trying to be creative with overflow scroll. When the user scrolls through the text I would like the close button to be fixed to the top of the container - not the window. Is this possible? Note - I am using a hard height for the example. I am also trying to avoid javascript and jQuery.

.otherContent { position: relative; width: 100%; height: 400px; padding: 2em; overflow-y: scroll; background: rgba(0,0,0,0.1); z-index: 1; } .parentContainer { position: relative; width: 100%; height: 200px; padding: 2em; overflow-y: scroll; background: #eeeeee; } .Content { position: relative; } .close { position: fixed; height: 1.2em; width: 1.2em; color: #FFF; background: pink; text-align: center; top: 0; right: 2em; z-index: 999; }

<div class="otherContent"></div> <div class="parentContainer"> <div class="Content"> <div class="close">X</div> Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah </div> </div>

Make the X have absolute positioning outside the <div class="Content"> but still inside the <div class="parentContainer">? — user7393973
– user7393973, Commented Mar 2, 2017 at 15:53
Fixed positioning will always anchor the element to your browser, not the container it's at. — Hewlett
– Hewlett, Commented Mar 2, 2017 at 15:56
That's not true, @Hewlett. It will position relative to active viewport and that's not necessarily the browser window. (But the browser window is the active viewport by default.) — tao
– tao, Commented Mar 2, 2017 at 16:23

grinmax · Accepted Answer · 2017-03-02 15:57:14Z

Try this

.otherContent { position: relative; width: 100%; height: 400px; padding: 2em; overflow-y: scroll; background: rgba(0,0,0,0.1); z-index: 1; } .parentContainer { position: relative; width: 100%; height: 200px; padding: 2em; background: #eeeeee; } .Content { position: relative; overflow-y: scroll; height: 200px; } .close { position: absolute; height: 1.2em; width: 1.2em; color: #FFF; background: pink; text-align: center; top: 0; right: 2em; z-index: 999; }

Live JsFiddle - https://jsfiddle.net/grinmax_/drmrd59d/

nartoan · Accepted Answer · 2017-03-02 15:57:02Z

0

Try :

.close { position: absolute; }

I hope it answer

answered Mar 2, 2017 at 15:57

nartoan

3782 silver badges9 bronze badges

Collectives™ on Stack Overflow

How can I position: fixed an element relative to the parent container?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related