Fixed positioned div within a relative parent div

Question

I am currently building a responsive website and need a menu to be fixed  thus not scrolling when the rest of the site scrolls  the issue is that it is a fluid layout and i want the  fixed positioned  menu item to be fixed relative to the containing parent element and not to browser window  is there anyway this can be done

User · Answer

you can fix the wrapper using absolute positioning. and the give inside div a fixed position.

.wrapper{
 position:absolute;
 left:10%;// or some valve in px
 top:10%; // or some valve in px
 }

and div inside that

.wrapper .fixed-element{ 
position:fixed;
width:100%;
height:100%;
margin-left:auto; // to center this div inside at center give auto margin
margin-right:auto;
}

try this It might work for you

User · Answer

This question came first on Google although an old one so I m posting the working answer I found  which can be of use to someone else   This requires 3 divs including the fixed div   HTML   lt div class  wrapper  gt       lt div class  parent  gt           lt div class  child  gt  lt  div gt       lt  div gt   lt  div gt    CSS   wrapper   position relative  width 1280px         parent   position absolute             child   position fixed  width 960px

User · Answer

Gavin    The issue you are having is a misunderstanding of positioning  If you want it to be  fixed  relative to the parent  then you really want your  fixed to be position absolute which will update its position relative to the parent    This question fully describes positioning types and how to use them effectively   In summary  your CSS should be    wrap       position relative     fixed       position absolute      top 30px      left 40px

User · Answer

This is possible if you move the fixed  lt div gt  using margins and not positions    wrap  position absolute left 100px top 100px     fixed      position fixed     width 10px     height 10px     background-color  333     margin-left 200px     margin-top 200px      And this HTML    lt div id  wrap  gt      lt div id  fixed  gt  lt  div gt   lt  div gt    Play around with this jsfiddle

User · Answer

Try postion sticky on parent element

User · Answer

here is a more generic solution  that don t depends on the Menu Header height  its fully responsive  Pure CSS solution  Works great on IE8   Firefox  Chrome  Safari  opera  supports Content scrolling without affecting the Menu Header   Test it with that Working Fiddle  The Html    lt div class  Container  gt       lt div class  First  gt           lt p gt The First div height is not fixed lt  p gt           lt p gt This Layout has been tested on  IE10  IE9  IE8  FireFox  Chrome  Safari  using Pure CSS 2 1 only lt  p gt       lt  div gt       lt div class  Second  gt           lt div class  Wrapper  gt               lt div class  Centered  gt                   lt p gt The Second div should always span the available Container space  lt  p gt                   lt p gt This content is vertically Centered  lt  p gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    The CSS           margin  0      padding  0     html  body   Container       height  100           Container before               content              height  100           float  left          First         for demonstration only       background-color   bf5b5b      Second       position  relative      z-index  1        for demonstration only       background-color   6ea364          Second after               content              clear  both          display  block           This part his relevant only for Vertically centering    Wrapper       position  absolute      width  100       height  100       overflow  auto         Wrapper before               content              display  inline-block          vertical-align  middle          height  100           Centered       display  inline-block      vertical-align  middle

User · Answer

A simple thing you can do is position your fixed DIV relative to the rest of your page with   values   Check out this jsfiddle here where the fixed DIV is a sidebar   div wrapper       margin  auto      width  80      div main       width  60      div sidebar       position  fixed      width  30       left  60       And a brief picture below describing the layout above

User · Answer

Sample solution  Check  if this is what you need     lt div class  container  gt      lt div class  relative  gt               lt div class  absolute  gt  lt  div gt               lt div class  content  gt           lt p gt            Content here          lt  p gt         lt  div gt       lt  div gt    lt  div gt    And for CSS   relative      position  relative      absolute     position  absolute    top  15px    left  25px         See it on codepen https   codepen io FelySpring pen jXENXY

User · Answer

An easy solution that doesn t involve resorting to JavaScript and will not break CSS transforms is to simply have a non-scrolling element  the same size as your scrolling element  absolute-positioned over it   The basic HTML structure would be  CSS   lt style gt       parent-to-position-by           position  relative          top  40px     just to show it s relative positioned               scrolling-contents           display  inline-block          width  100           height  200px          line-height  20px          white-space  nowrap          background-color   CCC          overflow  scroll             fixed-elements           display  inline-block          position  absolute          top  0          left  0             fixed           position  absolute     effectively fixed            top  20px          left  20px          background-color   F00          width  200px          height  20px         lt  style gt    HTML   lt div class  parent-to-position-by  gt       lt div class  fixed-elements  gt           lt div class  fixed  gt              I am  amp quot fixed positioned amp quot           lt  div gt       lt  div gt       lt div class  scrolling-contents  gt          Lots of contents which may be scrolled       lt  div gt   lt  div gt     parent-to-position-by would be the relative div to position something fixed with respect to  scrolling-contents would span the size of this div and contain its main contents fixed-elements is just an absolute-positioned div spanning the same space over top of the scrolling-contents div  by absolute-positioning the div with the fixed class  it achieves the same effect as if it were fixed-positioned with respect to the parent div   or the scrolling contents  as they span that full space    Here s a js-fiddle with a working example

[fixed] Fixed positioned div within a relative parent div

Examples related to fixed

Examples related to css