Css div容器内的固定位置div

我试图在相对容器中创建固定位置div。我正在使用引导css框架。我正在尝试创建一个固定位置的购物车。所以，每当用户滚动页面时，它都会显示购物车内容。但现在的问题是，它在容器分区之外运行

这必须在响应模式下工作

以下是我的尝试：

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

.

屏幕截图：

这就是

位置：固定的方式行为：


不要为元素留空间。相反，将其定位在
相对于屏幕视口的指定位置，不移动
当滚动时。打印时，将其放置在屏幕上的固定位置
每一页

因此，要获得您想要的，您必须使用固定定位以外的其他方法：

可能是这样的：

你可以加上

.element {
    left:368px;
}

小提琴：
如果您希望显示购物车，即使用户滚动固定，您也应该使用购物车的
位置：固定
（如果
.container
是您的购物车），因为它应该相对于屏幕/视口显示。当前代码将只显示绝对位于
容器内的
元素
。如果你希望它是那样的，那么给出：

.container {
position:relative;
}

.element {
position:absolute;
top:50px;
right:0px;
}

不，这是不可能的，因为fixed属性将元素从流中抛出，因此它不依赖于文档中的任何内容，而且是的，它不再包含在您的容器中：）
我找到了答案：


库库

其他事情


您希望class=inContainer位于class=Container的固定位置，但如果使用导航器滚动，则不希望class=inContainer移动到class=Container之外

所以你可以做这样的东西

.container{
高度：500px；
宽度：500px；
溢出y：滚动；
}
.容器{
位置：绝对位置；
}

因此class=inContainer将始终位于class=Container的顶部，如果使用navigator scroll=，则会随class=Container一起移动。）

（仅使用chrome进行测试）
是的，您可以这样做，只需使用
页边距顶部
属性而不是
顶部
属性

使用“位置：固定”并指定顶部和/或左侧位置时，
您会发现元素相对于窗口是固定的，并且
不适用于位置的任何其他元素：相对

有一种方法可以解决这个问题，那就是不指定顶部和左侧
而不是使用左边距和右边距顶部
位置：固定元件

来源：

F
使元素的父容器具有
位置：相对

不要使用
top
或
left
而使用
margintop
和/或
marginleft

如果仅使用
top
将基于窗口定位元素，但如果使用
margin top
将基于父元素定位。
左
或
右

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative;
}
.child {
  position: fixed;
  margin-top: 30px;
  margin-left: 30px;
}


.家长{
位置：相对位置；
}
.孩子{
位置：固定；
边缘顶部：30px；
左边距：30px；
}
AdityaSaxena的回答中提到了定位的行为

要创建固定位置购物车，还可以使用jquery

如果我们应用Left或right值或margin，我们在响应时可能会遇到一些问题

在下面的代码片段中，我将fixed元素放置在容器的右侧

即使容器的宽度增加，也会相应地放置固定元件

这是你的电话号码


//Jquery
$（文档）.ready（函数（）{
var containerWidth=$（“.container”）.outerWidth（）；
var elementWidth=$（“.element”）.outerWidth（）；
var containerOffsetLeft=$（“.container”）.offset（）.left；
var containerOffsetRight=containerOffsetLeft+containerWidth-元素宽度；
$（“.element”）.css（“左”，containerOffsetRight）；
});
//CSS
.包装纸{
宽度：100%
}
.集装箱{
宽度：300px；
保证金：0自动；
高度：900px；
背景：#ccc；
}
.元素{
背景#f2f2；
位置：固定；
宽度：50px；
高度：70像素；
顶部：50px；
边框：1px实心#d6；
}

固定的
答案对你有用吗？没有：（我在发帖之前已经试过了。我给了你一个JSFIDLE来做一个工作演示。为什么不起作用呢？你的演示可以工作，但不能在响应模式下。谷歌：确保你没有设置，例如，
左
和
顶
，同时也使用
位置：固定
；否则，你会完全覆盖它。我想要一个f。）rozen页眉，但带有绝对页眉，可以滚动
.container {
position:relative;
}

.element {
position:absolute;
top:50px;
right:0px;
}

<div style="position: fixed;bottom: 0;width: 100%;">
  <div class="container" style="position: relative;">
    <div style="position: absolute;right: 40px;bottom: 40px;background:#6cb975;border-radius: 50%;width: 40px;text-align: center;height: 50px;color: #fff;line-height: 50px;">
      F
    </div>
  </div>
</div>

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative;
}
.child {
  position: fixed;
  margin-top: 30px;
  margin-left: 30px;
}