css – 固定位置div里面的div容器

我试图在相对容器内创建固定位置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;
}

See live example here.

解决方法

截图：

这是如何位置：固定;表现：

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.

因此,要得到你想要的东西,你必须使用比固定定位更多的东西：

可能这个：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;
}