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

标签 css dom

<分区>

我发现当我固定一个元素时,父元素是否相对定位并不重要,它会相对于窗口固定位置?

#wrapper {
  width: 300px;
  background: orange;
  margin: 0 auto;
  position: relative;
}

#feedback {
  position: fixed;
  right: 0;
  top: 120px;
}
<div id="wrapper">
    ...
    <a id="feedback" href="#">Feedback</a>
</div>

http://jsbin.com/ibesa3

最佳答案

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


要相对于父元素“固定”定位元素,您需要在子元素上使用 position:absolute,以及除 default 或 static 之外的任何位置模式在你的父元素上。

例如:

#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 相对于网络浏览器窗口固定定位,距离底部边缘 40 像素,距离右侧边缘 40 像素。

关于css - 我可以定位相对于父元素固定的元素吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5209814/

相关文章:

html - 去除div左上角和右上角的空间

javascript - 动态添加标签到正文

html - 当元素从相对定位到固定但腾出的空间保持固定高度时,是否会发生页面回流

javascript - 使用 JS 获取 Html 元素背景颜色

css - 在 bootstrap 4 中关闭折叠的导航栏后,导航栏元素仍然可见一段时间

html - 为什么 margin 不适用于组件,即使是用相对位置定义的组件

jquery - 在输入字段中将占位符文本换行

java - 从 xml 文档中提取标签

java - 如何从 Java applet 线程调用 JavaScript 回调?

html - CSS Hover 定位其他元素