Screenshot:

This is how position: fixed; behaves:

MDN link

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.

Hence, to get what you want you have to use something more than fixed positioning:

Probably this: demo

.wrapper { width:100% } .container { width:300px; margin:0 auto; height:500px; background:#ccc; } .element { background:#f2f2f2; position:fixed; width:50px; height:70px; margin-left:250px; border:0px solid #d6d6d6; } 

Screenshot:

This is how position: fixed; behaves:

MDN link

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.

Hence, to get what you want you have to use something more than fixed positioning:

Probably this:

.wrapper { width: 100% } .container { width: 300px; margin: 0 auto; height: 500px; background: #ccc; } .element { background: #f2f2f2; position: fixed; width: 50px; height: 70px; margin-left: 250px; border: 0px solid #d6d6d6; }

<div class="wrapper"> <div class="container"> <div class="element"> fixed </div> </div> </div>

This is how position: fixed; behaves:

MDN link

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.

Hence, to get what you want you have to use something more than fixed positioning:

Probably this: demo

.wrapper { width:100% } .container { width:300px; margin:0 auto; height:500px; background:#ccc; } .element { background:#f2f2f2; position:fixed; width:50px; height:70px; margin-left:250px; border:0px solid #d6d6d6; } 

Screenshot:

This is how position: fixed; behaves:

MDN link

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.

Hence, to get what you want you have to use something more than fixed positioning:

Probably this: demo

.wrapper { width:100% } .container { width:300px; margin:0 auto; height:500px; background:#ccc; } .element { background:#f2f2f2; position:fixed; width:50px; height:70px; margin-left:250px; border:0px solid #d6d6d6; }