div容器内的固定位置div

Question

我试图在相对容器内创建固定位置div.我正在使用bootstrap css框架.我正在尝试创建一个固定位置的购物车.所以每当用户滚动页面时,它将显示购物车内容.但现在问题是,它跑到了容器div之外.

这必须在响应模式下工作.

在这里我尝试:

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

CSS代码:

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

在这里查看实例.

Answer 1

屏幕截图：

这是如何position: fixed;表现的：

MDN链接

不要为元素留出空间。而是将其放置在相对于屏幕视口的指定位置，并且在滚动时不会移动。打印时，将其放置在每页上的该固定位置上。

因此，要获得所需的内容，您必须使用固定位置以外的方法：

可能是这样：演示

.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

您只需添加

.element {
    left:368px;
}

小提琴： http: //jsfiddle.net/UUgG4/