固定位置的 div 容器内嵌在另一个 div 容器中

Question

我正在尝试在相对容器内创建固定位置的div。我正在使用bootstrap css框架。我正在尝试创建一个固定位置的购物车。因此，无论用户滚动页面，它都会显示购物车内容。但现在的问题是，它跑到了容器div之外。

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

以下是我的尝试：

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

- Swapnil Bhavsar

---

你尝试过这些答案了吗？ - AdityaSaxena

不行 :( 我在发布之前已经尝试过了。 - Swapnil Bhavsar

我给你提供了一个可工作的 jsfiddle 示范代码.. 为什么它不能正常运作？ - AdityaSaxena

您的演示在常规模式下可以正常运行，但不支持响应式模式。 - Swapnil Bhavsar

谷歌员工请注意：如果您同时设置left和top，并且使用position: fixed，那么您将完全覆盖它。 - Andrew

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

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

- AdityaSaxena

Answer 2

我找到了答案：

我找到了答案：

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

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

你希望将class="inContainer"固定在class="Container"中，但如果你使用导航滚动条滚动，你不希望class="inContainer"移动到class="container"外面。

因此，你可以像这样做：

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

.inContainer {
    position: absolute; 
}

所以 class=inContainer 将始终位于 class=Container 顶部，并且随着您使用导航器滚动而移动 =) （仅在 chrome 中测试过）

- Lucsartes

Answer 3

让元素的父容器具有position: relative属性

不要使用top或left，而是使用margin-top和/或margin-left 如果只使用top，则该元素将根据窗口定位，但如果使用margin-top，则该元素将基于父元素定位。 left或right同理

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

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

- Nate Beers

Answer 4

是的，你可以这样做，只需使用margin-top属性而不是top属性。

当您使用position:fixed并指定顶部和/或左侧位置时， 您会发现该元素将固定在窗口中，而不是任何其他position:relative元素。

有一种方法可以解决这个问题，那就是不指定顶部和左侧位置，而是在position:fixed元素上使用margin-left和margin-top。

来源：https://www.gravitywell.co.uk/latest/design/posts/css-tip-fixed-positioning-inside-a-relative-container/

- Bence

Answer 5

不，这是不可能的，因为fixed属性会使元素脱离文档流，因此它不依赖于文档中的任何内容，是不再包含在您的容器中的：）

- Aysennoussi

Answer 6

在 AdityaSaxena 的答案中提到了定位的行为https://dev59.com/0XXYa4cB1Zd3GeqP-Mm8#18285591

要创建一个固定位置的购物车，您也可以使用 jQuery 来实现。

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

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

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

这里是 jsfiddle 演示 URL

//Jquery

$(document).ready(function(){
var containerWidth = $(".container").outerWidth();
var elementWidth = $(".element").outerWidth();
var containerOffsetLeft = $(".container").offset().left;
var containerOffsetRight = containerOffsetLeft + containerWidth - elementWidth;
 $(".element").css("left", containerOffsetRight);
});

//CSS

.wrapper {
    width:100%
}
.container {
    width:300px;
    margin:0 auto;
    height:900px;
    background:#ccc;
}
.element {
    background:#f2f2f2;
    position:fixed;
    width:50px;
    height:70px;
    top:50px;
    border:1px solid #d6d6d6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



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

希望这可以帮到您。

谢谢

- Satheesh Kumar

Answer 7

如果您想在用户滚动时显示固定的购物车，则应为购物车使用position:fixed（如果.container是您的购物车），因为它应该相对于屏幕/视口显示。 您当前的代码仅会显示位于container内部绝对定位的element。 如果您希望它保持这样，请添加以下内容：

.container {
position:relative;
}

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

- noob

---

我想要一个冻结的标题，但是使用绝对定位它会随着滚动而移动。 - SearchForKnowledge

Answer 8

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

- Pradeep

Answer 9

你只需要添加

.element {
    left:368px;
}

代码片段：http://jsfiddle.net/UUgG4/

- hexicle