我有一个固定对象位于相对定位的父对象中。当您向下滚动页面时,父对象会移动,而固定对象会停留在页面上的特定位置。问题在于,无论相对定位的父对象位于何处,固定对象都是可见的。
有没有办法将固定的物体夹在父母身上?
我一直在寻找解决方法,但找不到。
我有一个固定对象位于相对定位的父对象中。当您向下滚动页面时,父对象会移动,而固定对象会停留在页面上的特定位置。问题在于,无论相对定位的父对象位于何处,固定对象都是可见的。
有没有办法将固定的物体夹在父母身上?
我一直在寻找解决方法,但找不到。
因为固定位置元素相对于视口是固定的,而不是另一个元素。因此,由于视口没有将其切断,溢出变得无关紧要。
您要问的问题是设计不可能的。尝试使用绝对位置而不是固定位置。看看这张关于定位的表格,从www.w3schools.com复制:
静态 >> 默认。元素按顺序呈现,就像它们出现在文档流中一样 播放 »
absolute >> 元素相对于它的第一个定位(非静态)祖先元素定位 播放它 »
固定>>元素相对于浏览器窗口定位播放它»
relative >> 元素是相对于它的正常位置定位的,所以 "left:20" 在元素的 LEFT 位置上增加了 20 个像素 播放它 »
继承 >> position 属性的值是从父元素继承的
我认为你正在寻找的是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;
}
(我只将 body 高度设置为 1000 像素,以便盒子滚动并显示定位。)