CSS position:fixed inside a positioned element
I have a positioned div whose content can be too long so scrollbars appear ( overflow:auto set). It functions as a dialog box in an ajax app. I want to fix a close button on it’s right top corner so when the user scrolls the div it won’t scroll away. I tryed it with position:fixed; right:0; top:0 but it placed the button on the right top of the page not in the div (in firefox). Is it possible to do this button placement using CSS only without hacking with the offsetWidth/Height in js on every scroll event? ps: the div’s height and width is not a fixed value it depends on the content’s size and the browser window’s size. User can also resize it if he want.
It might be worthwhile to consider using a div with a fixed-position background image for the button.
@ithil So long as the height and width of the div are set to match that of the background image, it should be clickable. As far as handling the click, that depends on whether you’re using plain HTML or JS. If it’s just HTML, you could wrap the div in an a tag with an href (or even just use an a tag instead of a div and set it as display: inline-block ). If it’s JS, you can listen for a click on the div . Did I understand your question correctly?
@NickM yes I believe you did thanks, but the height and width will be «set to match» using JS too I guess? as in the OP question «the div’s height and width is not a fixed value», that’s why I was wondering
@ithil I see. I missed that part. In that case, I think you’re right that some JS would have to handle the sizing of the div.
10 Answers 10
You can use the position:fixed; , but without set left and top . Then you will push it to the right using margin-left , to position it in the right position you wish.
@Sotiris can you provide a reference that explains why this should work? Why must browsers position a fixed element in this way when top and left are not specified? stackoverflow.com/questions/8712047/…
I agree this is not the answer. it doesn’t handle dynamic width containers as stated in the question.
The current selected solution appears to have misunderstood the problem.
The trick is to neither use absolute nor fixed positioning. Instead, have the close button outside of the div with its position set to relative and a left float so that it is immediately right of the div. Next, set a negative left margin and a positive z index so that it appears above the div.
Awesome answer, got me on the path to a better solution for having an element fixed inside of a scrollable div.
I know this is an old post but I had the same question but didn’t find an answer that set the element fixed relative to a parent div . The scroll bar on medium.com is a great pure CSS solution for setting something position: fixed; relative to a parent element instead of the viewport (kinda*). It is achieved by setting the parent div to position: relative; and having a button wrapper with position: absolute; and the button of course is position: fixed; as follows:
Your long content here .wrapper < position: relative; >.button-wrapper < position: absolute; right: 0; top: 0; width: 50px; >.button *Since fixed elements don’t scroll with the page the vertical position will still be relative to the viewport but the horizontal position is relative to the parent with this solution.
Can I position an element fixed relative to parent? [duplicate]
I find that when I position an element fixed, it doesn’t matter if the parent is positioned relative or not, it will position fixed, relative to the window?
«position:sticky» would be the solution. As of now Apr 2016, Firefox seems to be the only browser that supports this (caniuse.com/#feat=css-sticky).
In recent browsers (released after this question was asked), a better solution is available. See the answer labelled 2016 update
10 Answers 10
Let me provide answers to both possible questions. Note that your existing title (and original post) ask a question different than what you seek in your edit and subsequent comment.
To position an element «fixed» relative to a parent element, you want position:absolute on the child element, and any position mode other than the default or static on your parent element.
This will position childDiv element 50 pixels left and 20 pixels down relative to parentDiv’s position.
To position an element «fixed» relative to the window, you want position:fixed , and can use top: , left: , right: , and bottom: to position as you see fit.
This will position yourDiv fixed relative to the web browser window, 40 pixels from the bottom edge and 40 pixels from the right edge.
oh, hmm. I actually want to mimic a sticky button, when its positioned absolute, when I scroll down, it doesn’t sticky . hmm
@Will take that up with the OP who chose it as his answer. Apparently he made edits to his question at some stage later. I’m not in a hurry to delete this answer, since there are still people out there apparently finding it useful (8 upvotes), and is an answer to the title of the question. The OP should pick a different accepted answer if a different one is now the better answer.
@DuckMaestro what about doing it inside of overflown div with scrollbar? position:absolute will make it scroll along with it.
While this solution may in fact have benefited OP, it does not answer the question being asked in the title. The answer below this one is far more accurate and should be marked as the correct one.
You should update your answer since calc helps us resolve this with ease. Assuming that your main container can grow up to 900px for initial values you can set to right: 0px after break point hits css @media screen and (min-width: 901px) < right: calc((100% - 900px) / 2) >this will again get those elements attached to your main container.
The CSS specification requires that position:fixed be anchored to the viewport, not the containing positioned element.
If you must specify your coordinates relative to a parent, you will have to use JavaScript to find the parent’s position relative to the viewport first, then set the child (fixed) element’s position accordingly.
ALTERNATIVE: Some browsers have sticky CSS support which limits an element to be positioned within both its container and the viewport. Per the commit message:
sticky . constrains an element to be positioned inside the intersection of its container box, and the viewport.
A stickily positioned element behaves like position:relative (space is reserved for it in-flow), but with an offset that is determined by the sticky position. Changed isInFlowPositioned() to cover relative and sticky.
Depending on your design goals, this behavior may be helpful in some cases. It is currently a working draft, and has decent support, aside from table elements. position: sticky still needs a -webkit prefix in Safari.
See caniuse for up-to-date stats on browser support.
CSS make DIV position fixed inside DIV with PERSPECTIVE propertie
i have a problem for getting #fixed with position:fixed relative to #container check this fiddle out : https://jsfiddle.net/a1zoghs0/2/ i know that, if i put #fixed outside of #container , it will had position:fixed . just like this fiddle : https://jsfiddle.net/xc879rbm/1/ but unluckly, i have an issue where this method can’t working. is it possible to put this inside #container and still enable position:fixed relative to #container ? is there anything wrong with my code? thanks in advance.
when i’m creating javascript overlay function with position:fixed to center, it’s not fixed to #container. it cause crash. it’s ugly
4 Answers 4
Here is my solution. I’m not exactly sure of all math details in it, but it looks quite robust to resizing of the window.
The main trick is to put the header so far away and make it so big, that movements of the viewport do not affect it’s position much — think about moon on the sky, which is big and far away, and thus your movements of the head do not affect it’s position.
body < margin:0; /* without it your container will not cover full body */ >#container < width:100vw; /* probably 100% would be ok here */ height:100vh; /* 100% would not be ok here, as we need to center perspective viewport w.r.t. screen- not w.r.t. whole long page content */ /* this makes math easier to me */ perspective:1px; perspective-origin:0 0; /* we want container to be a window through which you watch the scrolling world */ overflow-y:scroll; /* we don't want scrollbar at the bottom, as it would again force us to use calc for perspective-origin-y. Frankly, I do not know why the scrollbar appears at all */ overflow-x:hidden; /* This is to allow positioning of layers relatively to container*/ position:relative; >.parallaxBase < width:100%; position:absolute; top:200px; >.parallaxBack < height:100vh; /* The general formula to keep size intact is scale(perspective-z) so in our case it is scale(1+1) */ transform:translateZ(-1px) scale(2); transform-origin: 0 0; >#background #content #fixed this is fixed // why not fixed? this is parallax this is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is content this is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is content