Question

我有一个固定的对象位于相对定位的父对象中。当您向下滚动页面时，父级移动，固定对象保留在页面上的特定位置。问题是固定对象是可见的，无论相对定位的父对象位于何处。

有没有办法将固定物体剪辑给父母？

我一直在找工作，但我找不到一个。

Answer 1

因为固定位置元素相对于视口是固定的，而不是另一个元素。因此，由于视口没有将其切断，溢出变得无关紧要。

Answer 2

您所要求的是设计无法实现的。尝试使用绝对位置而不是固定位置。从www.w3schools.com：

复制来看这个有关定位的表格

static＆gt;＆gt;默认。元素按顺序呈现，因为它们出现在文档流程中播放»
绝对＆gt;＆gt;元素相对于其第一个定位（非静态）祖先元素定位播放»
fixed＆gt;＆gt;元素相对于浏览器窗口定位播放»
relative＆gt;＆gt;元素相对于其正常位置定位，因此“left：20”将20个像素添加到元素的LEFT位置播放»
继承＆gt;＆gt; position属性的值继承自父元素

Answer 3

我认为你要找的是position: absolute而不是固定的。固定位置始终固定在视口上，而绝对定位基于最近定位的祖先。

这是一个显示此行为的小提琴：http://jsfiddle.net/8u7aZ/

HTML：

<div id="parent">
    Some text.
    <div id="littleChild"></div>
</div>

CSS：

body {
    height: 1000px;
}

#parent {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
}

#littleChild {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    background-color: #000;
}

（我只将身高设置为1000px，这样盒子就会滚动并显示定位。）

固定对象剪裁为父级

3 个答案: