fixed position div inside div container

Question

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:

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

CSS Code:

.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;
}

See live example here.

Answer 1

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;
}

Answer 2

I found the answer to that :

 <div class="container">
        <div class="inContainer">
            <p> coucou </p>
        </div>

        <div>
            <p> other thing</p>
        </div>
 </div>

You want that class=inContainer are in class=Container in fixed position but if you scroll with the navigator scroll you don't want that the class=inContainer move outside the class=container

So you can make something like that

.container{
    height: 500px;
    width: 500px;
    overflow-y:scroll;
}

.inContainer {
    position: absolute; 
}

So class=inContainer will be always on the top of you're class=Container and move with you're class=container if you scroll with navigator scroll =)

(tested only with chrome)