CODEWITHSUNDEEP
htmlcss
Body
Body

Reputation: 3688

Position fixed div to stick inside the parent

My code goes like this,

HTML

<div class="container">
    <div class="button"></div>
</div>

CSS

.container { position: relative; }
.button { position: fixed; top: 0; right: 0;  }

This is a responsive page and width of the container is dynamically changing when re-sizing the window. I want to stick the .button inside the container at top right side even the page is scrolling. But my code shows the .button outside the .container at top right of the screen.

Please help me fix this.

Thanks and Regards.

Upvotes: 3

Views: 7995

Answers (2)

MarcoK
MarcoK

Reputation: 6110

You should use position: absolute for this.

.container { position: relative; }
.button { position: absolute; top: 0; right: 0; }

JSFiddle example.

position: fixed is positioned against the window, not the parent.

Upvotes: 6

CoursesWeb
CoursesWeb

Reputation: 4237

From what I know position:fixed; is relative to main window, not to parennt.

Upvotes: 0

Related Questions