当前位置: 首页 > 面试题库 >

我可以相对于父项定位固定的元素吗?

楚嘉胜
2023-03-14
问题内容

我发现当我固定一个元素固定的位置时,父元素是否相对放置都没关系,它相对于窗口的位置是否固定?

CSS

#wrapper { width: 300px; background: orange; margin: 0 auto; position: relative; }
#feedback { position: fixed; right: 0; top: 120px; }

HTML

<div id="wrapper">
    ...
    <a id="feedback" href="#">Feedback</a>
</div>

问题答案:

让我为两个可能的问题提供答案。请注意,您现有的标题(和原始帖子)提出的问题与您在编辑和后续评论中寻求的问题不同。

要将元素相对于父元素“固定”position:absolute放置,您需要在子元素上,并且要在 父元素
上使用默认或静态以外的任何位置模式。

例如:

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

这将childDiv相对于parentDiv的位置将元素定位左50个像素,并向下定位20个像素。

位置“固定”相对于窗口元素
,你想position:fixed,并且可以使用top:left:right:,和bottom:对的位置,你认为合适的。

例如:

#yourDiv { position:fixed; bottom:40px; right:40px; }

yourDiv相对于Web浏览器窗口,它的位置是固定的,距底部边缘40像素,距右侧边缘40像素。



 类似资料:
  • 本文向大家介绍怎么让position:fixed相对于父元素定位?相关面试题,主要包含被问及怎么让position:fixed相对于父元素定位?时的应答技巧和注意事项,需要的朋友参考一下 1、 给父元素设置transform 2、 不设置top/right/bottom/left属性,用margin定位

  • 我有这些要素: 这是他们的CSS配置。 但第一个元素落后于第二个元素。

  • 问题内容: 我正在尝试给div(位置:固定)的宽度为100%(与其父div有关)。但是我有一些问题 编辑: **第一个问题是通过使用继承解决的,但它仍然无法正常工作。我认为问题在于我正在使用多个采用100%/继承宽度的div。 福克斯的例子 和html 问题似乎是 固定元素始终采用window / document的宽度 。有人知道如何解决吗? 我无法使用我的固定元素进行固定,因为我正在使用jSc

  • 问题内容: 这是我要完成的工作: 我需要一个按钮,该按钮与div的右侧保持一定距离,并且无论视口的大小如何,该按钮始终与div的侧面保持相同的距离,但是会随窗口滚动。 因此,始终是div右侧的x像素,而始终是视口顶部的y像素。 这可能吗? 问题答案: 水平放置固定元素(基于另一个元素) ( 免责声明 :此处提供的解决方案在技术上并非如问题标题所述为“绝对水平 ”,而是实现了OP最初想要的功能,固定

  • 问题内容: 我正在尝试使用以下方法修复一个问题,使其始终停留在屏幕顶部: 但是,该容器位于居中的容器中。当我使用它时,它固定了相对于浏览器窗口的相对位置,例如它靠在浏览器的右侧。相反,它应该相对于容器固定。 我知道可以用来相对于修复元素,但是当您向下滚动页面时,该元素消失并且不会像那样粘在顶部。 是否有破解或解决方法来实现这一目标? 问题答案: 简短的回答: 不。 (现在可以使用CSS转换。请参见

  • 问题内容: 我已经有一段时间了,这似乎是一个Chrome重绘错误,尚未修复。因此,我正在寻找任何权宜之计。 主要问题是页面上的元素具有使用以下内容的背景图像时: 如果另一个元素固定并具有子视频元素,则它将导致具有背景图像的元素消失。 现在,它可以在Safari(以及Firefox和IE)中正常运行,因此这并不是Webkit的问题。我已经应用了一些没有用的建议属性。 目前,我的解决方案只是通过媒体查