div容器内的固定位置div答案

【问题标题】：fixed position div inside div containerdiv容器内的固定位置div
【发布时间】：2013-08-17 05:29:16
【问题描述】：

我正在尝试在相对容器内创建固定位置的 div。我正在使用引导 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.

【问题讨论】：

这些答案对你有用吗？
不 :( 我在发帖之前已经尝试过这些。
我给了你一个 jsfiddle 用于工作演示。为什么它不起作用？
您的演示可以工作，但不能在响应模式下
Google 员工： 确保您没有设置例如left 和 top 同时还使用 position: fixed；否则，您将完全覆盖它。

标签： css twitter-bootstrap

【解决方案1】：

截图：

这就是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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

AdityaSaxena 的回答https://stackoverflow.com/a/18285591/5746301中提到了定位的行为

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

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

在下面的sn-p中，我把fixed元素放在了容器的右边。

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

这里是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>

希望对您有所帮助。

谢谢

【讨论】：

【解决方案4】：

我找到了答案：

 <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 并与您一起移动 class=container 如果您使用导航器滚动 =)

（仅使用 chrome 测试）

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

是的，你可以做到，只需使用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/

【讨论】：

【解决方案7】：

如果您希望在用户滚动固定时也显示购物车，那么您应该使用position:fixed 作为购物车（如果.container 是您的购物车），因为它应该相对于屏幕/视口显示.您当前的代码将仅显示绝对位于container 内的element。如果你希望它是那样的，那就给：

.container {
position:relative;
}

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

【讨论】：

我想要一个冻结的标题，但绝对它会滚动

【解决方案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>

【讨论】：

【解决方案9】：

你可以添加

.element {
    left:368px;
}

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

【讨论】：