Can I position an element fixed relative to parent

Question

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   CSS   wrapper   width  300px  background  orange  margin  0 auto  position  relative     feedback   position  fixed  right  0  top  120px      HTML   lt div id  wrapper  gt               lt a id  feedback  href     gt Feedback lt  a gt   lt  div gt    http   jsbin com ibesa3

User · Answer

I know this is an older post  but I think a good example of what Jiew Meng was trying to do can already be found on this site   Check out the side menu located here  https   stackoverflow com faq questions   Looking at it without getting into it too deep  I can tell javascript attaches a fixed position once the scrolling hits below the anchor tag and removes the fixed positioning if the scrolling goes above that same anchor tag   Hopefully  that will get someone started in the right direction

User · Answer

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   For example      parentDiv   position relative     childDiv   position absolute  left 50px  top 20px      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    For example    yourDiv   position fixed  bottom 40px  right 40px      This will position yourDiv fixed relative to the web browser window  40 pixels from the bottom edge and 40 pixels from the right edge

User · Answer

Here is an example of Jon Adams suggestion above in order to fix a div  toolbar  to the right hand side of your page element using jQuery  The idea is to find the distance from the right hand side of the viewport to the right hand side of the page element and to keep the right hand side of the toolbar there     HTML   lt div id  pageElement  gt  lt  div gt   lt div id  toolbar  gt  lt  div gt    CSS   toolbar       position  fixed           jQuery  function placeOnRightHandEdgeOfElement toolbar  pageElement          toolbar  css  right     window  scrollLeft       window  width       -   pageElement  offset   left     - parseInt   pageElement  css  borderLeftWidth   10      -   pageElement  width      px        document  ready function           window  resize function             placeOnRightHandEdgeOfElement   toolbar     pageElement                  window  scroll function               placeOnRightHandEdgeOfElement   toolbar     pageElement                    toolbar   resize

User · Answer

I know this is super old but after not finding the  pure CSS  answer I was looking for I came up with this solution  partially abstracted from medium com  and thought it might help others looking to do the same thing    If you combine  DuckMaestro s answers you can position an element fixed relative to a parent  actually grandparent   Use position  absolute  to position an element inside a parent with position  relative  and then position  fixed  on an element inside the absolute positioned element like so   HTML   lt div class  relative  gt     lt div class  absolute  gt       lt a class  fixed-feedback  gt This element will be fixed lt  a gt     lt  div gt   lt  div gt    CSS   relative     margin  0 auto    position  relative    width  300px      absolute     position  absolute    right  0    top  0    width  50px      fixed-feedback     position  fixed    top  120px    width  50px      EXAMPLE  Like  JonAdams said  the definition of position  fixed requires the element to be positioned relative to the viewport but you can get around the horizontal aspect of that using this solution    Note  This is different than just setting a right or left value on the fixed element because that would cause it to move horizontally when a window is resized

User · Answer

This solution works for me  Reference to the original detailed answer  https   stackoverflow com a 11833892 5385623  css    level1       position  relative       level2       position  absolute       level3       position  fixed         Do not set top   left         html    lt div class  level1  gt       lt div class  level2  gt           lt div class  level3  gt              Content          lt  div gt       lt  div gt   lt  div gt

User · Answer

2016 Update  It s now possible in modern browsers to position an element fixed relative to its container  An element that has a transform property acts as the viewport for any of its fixed position child elements   Or as the CSS Transforms Module puts it      For elements whose layout is governed by the CSS box model  any value other than none for the transform property also causes the element to establish a containing block for all descendants  Its padding box will be used to layout for all of its absolute-position descendants  fixed-position descendants  and descendant fixed background attachments        x000D   x000D   context   x000D    width  300px  x000D    height  250px  x000D    margin  100px  x000D    transform  translateZ 0   x000D    x000D   viewport   x000D    width  100   x000D    height  100   x000D    border  1px solid black  x000D    overflow  scroll  x000D    x000D   centered   x000D    position  fixed  x000D    left  50   x000D    bottom  15px  x000D    transform  translateX -50    x000D    x000D   lt div class  context  gt  x000D     lt div class  viewport  gt  x000D       lt div class  canvas  gt  x000D   x000D         lt table gt  x000D           lt tr gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D             lt td gt stuff lt  td gt  x000D           lt  tr gt  x000D         lt  table gt  x000D   x000D         lt button class  centered  gt OK lt  button gt  x000D   x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

With multiple divs I managed to get a fixed-y and absolute-x divs  In my case I needed a div on left and right sides  aligned to a centered 1180px width div        lt div class  parentdiv  style           background  transparent          margin  auto          width  100           max-width  1220px          height  10px          text-align  center   gt           lt div style               position  fixed              width  100               max-width  1220px   gt               lt div style                   position  absolute                  background  black                  height  20px                  width  20px                  left  0   gt               lt  div gt               lt div style                   width  20px                  height  20px                  background  blue                  position  absolute                                                             right  0   gt               lt  div gt           lt  div gt       lt  div gt

User · Answer

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

User · Answer

It s an old post but i ll leave here my javascript solution just in case someone need it      x000D   x000D     you only need this function x000D  function sticky   el    x000D     el parentElement addEventListener  scroll   function    x000D       el style transform    translateY   this scrollTop  px    x000D        x000D    x000D   x000D   x000D     how to make it work  x000D     get the element you want to be sticky x000D  var el   document querySelector   blbl  gt  div    x000D     give the element as argument  done  x000D  sticky el   x000D   blbl  x000D    position relative  x000D    height 200px    x000D    overflow  auto  x000D    background   eee  x000D    x000D   x000D   blbl  gt  div  x000D    position absolute   x000D    padding 50px   x000D    top 10px   x000D    left 10px   x000D    background   f00 x000D    x000D   lt div id  blbl   gt  x000D       lt div gt  lt  -- sticky div -- gt  lt  div gt   x000D   x000D       lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  x000D       lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  x000D       lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  x000D       lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  x000D   lt  div gt  x000D   x000D   x000D      Notes    I used transform  translateY  px  because it should be lightweight to compute  high-performance-animations I only tried this function with modern browsers  it won t work for old browsers where vendors are required  and IE of course

User · Answer

first  set position  fixed and  left  50   and second     now your start is a center and you can set new position with margin

[css] Can I position an element fixed relative to parent?

Examples related to css

Examples related to dom