CSS position fixed inside a positioned element

Question

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

User · Answer

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.

Here's an example:

#close
    {
        position: relative;
        float: left;
        margin-top: 50vh;
        margin-left: -100px;
        z-index: 2;
    }

#dialog
    {
        height: 100vh;
        width: 100vw;
        position: relative;
        overflow: scroll;
        float: left;
    }

<body> 
    <div id="dialog">
    ****
    </div>

    <div id="close"> </div>
</body>

User · Answer

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   Check a demo here  http   jsbin com icili5

User · Answer

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    lt div class  wrapper  gt     lt div class  content  gt      Your long content here    lt  div gt      lt div class  button-wrapper  gt       lt button class  button  gt This is your button lt  button gt     lt  div gt   lt  div gt    lt style gt     wrapper       position  relative          button-wrapper       position  absolute      right  0      top  0      width  50px          button       position  fixed      top  0      width  50px       lt  style gt    working example   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

User · Answer

Try position sticky on parent div of the element you want to be fixed      More info here  http   html5-demos appspot com static css sticky html    Caution  Check for browser version compatibility

User · Answer

If your close button is going to be text  this works very well for me    close     position  fixed    width  70      the width of the parent      text-align  right     close span     cursor  pointer      Then your HTML can just be    lt div id  close  gt  lt span id  x  gt X lt  span gt  lt  div gt

User · Answer

I achieved to have an element with a fixed position  wiewport  but relative to the width of its parent    I just had to wrap my fixed element and give the parent a width 100   At the same time  the wrapped fixed element and the parent are in a div which width changes depending on the page  containing the content of the website  With this approach I can have the fixed element always at the same distance of the content  depending on the width of this one  In my case this was a  to top  button  always showing at 15px from the bottom and 15px right from the content   https   codepen io rafaqf pen MNqWKB   lt div class  body  gt     lt div class  content  gt       lt p gt Some content    lt  p gt       lt div class  top-wrapper  gt         lt a class  top  gt Top lt  a gt       lt  div gt     lt  div gt   lt  div gt    content     width  600px    change this width to play with the top element     background-color  wheat    height  9999px    margin  auto    padding  20px     top-wrapper     width  100     display  flex    justify-content  flex-end    z-index  9     top       display  flex      align-items  center      justify-content  center      width  60px      height  60px      border-radius  100       background-color  yellowgreen      position  fixed      bottom  20px      margin-left  100px      cursor  pointer       amp  hover         opacity   6

User · Answer

Position fixed gives an absolute position regarding the BROWSER window  so of course it goes there   While position absolute refers to the parent element  so if you place your  lt div gt  button inside the  lt div gt  of the container  it should position where you meant it to be  Something like  EDIT  thanks to  Sotiris  who has a point  solution can be achieved using a position fixed and a margin-left  Like this  http   jsfiddle net NeK4k

User · Answer

Seems  css transforms can be used      transform    property establishes a new local coordinate system at the element    but     this is not cross-browser  seems only Opera works correctly

[html] CSS position:fixed inside a positioned element

Examples related to html

Examples related to css

Examples related to stylesheet

Examples related to positioning