元素在容器元素内部的固定位置

Question

I have a parent div in which I want to make the child div stay fixed if the page is scrolled down.

I've tried to use position:relative; for the parent element and position:fixed; for the child but it doesn't work because the child div is positioned according to the window object not the parent div.

Is there any workaround for achieving this with CSS? If not, some javascript/Jquery tricks to create this ?

Any hints/suggestions are welcome!

Thanks!

Answer 1

Use position:relative; for the parent and position:absolute; for the child.

For example:

CSS:

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    left: 0;
}

HTML:

<div class="parent">
    <div class="child">
    </div>
</div>

Answer 2

Jquery.pin might help you here, I guess

It's a JQuery plugin, the feature is to provide a " sticky element to quietly hang around as you scroll down "

Answer 3

position:fixed is always relative to the window viewport

You can set the child as position absolute and set its top and left position to fixed values.