fixed position div inside div container
css, twitter-bootstrap
Solution
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>
Problem
I am trying to create fixed position div inside relative container. I am using bootstrap css framework. I am trying to create a fixed position cart. So whenever user scroll page it will show cart contents. but now problem is, it ran outside that container div. This has to work in responsive mode. Here my try: ``` .wrapper { width: 100% } .container { width: 300px; margin: 0 auto; height: 500px; background: #ccc; } .element { background: #f2f2f2; position: fixed; width: 50px; height: 70px; top: 50px; right: 0px; border: 1px solid #d6d6d6; } ``` ``` <div class="wrapper"> <div class="container"> <div class="element"> fixed </div> </div> </div> ```