How to make an element with fixed position relative to its parent, not the whole screen?


Tags: css

Problem :

I run into situation that when user scroll down, a part of the sidebar gets fixed position, however when I catch the position and apply fixed css to the sidebar element, it gets fixed to whole screen, not just the parent (which is sidebar)

how do I setup this correctly?



Solution :

First Understand Positioning:

Fixed Positioning OR [ position:fixed ]

An element with fixed position is positioned relative to the browser window.

Relative Positioning OR [ position:relative ]

A relative positioned element is positioned relative to its normal position.

Absolute Positioning OR [ position:absolute ]

An absolute position element is positioned relative to the first parent element that has a position other than static.

So in your case your parent div should have position:relative and your child div should have position:absolute instead of position:fixed

Reference Link


    CSS Howto..

    How to select other (sibling) elements CSS?

    Using CSS3 how to animate the multiple `background-image` for different view ports

    How do I make buttons that have the same transitions and some of the same properties, but then also have some differing properties?

    How to not display common border between two adjacent divs?

    How to make this grey kind of background with css?

    How to extend the background of a CSS-arrow to the whole page width?

    how to load an external css file if javascript is disabled

    How to create a fixed div inside an another div?

    How to get jQuery to recognize mouse over image once per hover

    How to make CSS hover effect persist after clicking Bootstrap button

    jquery css how to retain position if you remove margin

    How to debug Font-Awesome icons?

    How to put html input text into an image using CSS?

    Slideshow image with buttons

    colspan doesn't accept decimal numbers. How do I specify the span?

    How do I bottom-align bars in a CSS vertical bar chart?

    How to add css on elements created through ajax (jquery)?

    Three extra pixels at the bottom of the page unaccounted for and not sure how to get rid of them?

    How to change the css of the div that i just created in code

    How to Position an Image underneath a form in CSS

    How to make elliptical inner shadow with CSS?

    How can I set different gradients as background, each time user refreshes?

    How to dynamically modify