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

See live example here

Answer 1

截图：

enter image description here

这就是position: fixed;的行为方式：

MDN link

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

因此，要获得你想要的东西，你必须使用的不仅仅是固定的定位：

可能是这样的：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

我找到了答案：

 <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并且如果你用navigator scroll滚动那么你就是class = container <）

（仅使用铬测试）

Answer 3

不，这是不可能的，因为固定属性会将元素从流中抛出，因此它不依赖于文档中的任何内容，是的，它不再包含在容器中：）

Answer 4

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

当你使用position：fixed并指定一个顶部和/或左边的位置时，   你会发现元素将相对于窗口固定，并且   不对任何其他位置元素：相对。

有一种解决方法，而不是指定顶部和左侧   位置，但改为使用margin-left和margin-top   位置：固定元素。

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

Answer 5

使元素的父容器具有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;
}

Answer 6

如果您想要显示购物车，即使用户滚动固定，那么您应该使用position:fixed购物车（如果.container是您的购物车），因为它应该尊重地展示到屏幕/视口。您当前的代码只显示位于element内的container。如果你想要它，那就给：

.container {
position:relative;
}

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

Answer 7

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

Answer 8

AdityaSaxena的回答https://stackoverflow.com/a/18285591/5746301

中提到了定位的行为

要创建固定位置购物车，您也可以使用jquery来完成。

如果我们应用左或正确值或保证金，我们可能会在响应时遇到问题。

在下面的代码段中，我已将固定元素放在容器的右侧。

即使容器的宽度增加了相应的固定元素。

以下是jsfiddle Demo 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>

希望这可以帮助你。

<强>感谢

Answer 9

您只需添加

即可

.element {
    left:368px;
}

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

div容器内的固定位置div

9 个答案: