9

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

在此处查看实时示例。

4

9 回答 9

4

截屏：

在此处输入图像描述

这是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;
}
于 2013-08-17T05:45:13.587 回答
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 测试）

于 2015-07-31T13:53:05.300 回答
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;
}
于 2017-04-19T14:55:31.950 回答
1

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

于 2014-01-27T21:15:59.360 回答
1

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

当您使用 position: fixed 并指定一个顶部或左侧位置时，您会发现该元素将相对于窗口固定，而不是相对于 position: relative 的任何其他元素。

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

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

于 2015-11-13T09:51:30.727 回答
1

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

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

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

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

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

这是jsfiddle 演示网址

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

希望这可以帮助你。

谢谢

于 2018-05-22T07:21:21.947 回答
0

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

.container {
position:relative;
}

.element {
position:absolute;
top:50px;
right:0px;
}
于 2013-08-17T06:32:35.763 回答
0 
<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>
于 2017-01-06T04:48:17.780 回答
-2

你可以添加

.element {
    left:368px;
}

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

于 2013-08-17T06:07:16.573 回答