position fixed相对父级元素

position: fixed 会使元素脱离文档流，相对于第一个具有定位属性的父级元素进行定位。如果没有找到具有定位属性的父级元素，则相对于文档的初始包含块进行定位。

因此，如果要使 position: fixed 的元素相对于其父级元素进行定位，那么需要给父级元素设置 position 属性为 relative、absolute 或 fixed 中的任意一个，以将其变成定位元素。如果没有找到符合条件的父级元素，那么该元素就会相对于文档进行定位。

相关问题

position:fixed 相对父元素定位

position:fixed 属性用于将一个元素相对于浏览器窗口进行定位，不会随着页面滚动而移动。如果该元素的父级元素有定位属性，则该元素的定位参考父级元素而不是浏览器窗口。如果父级元素没有定位属性，则该元素的定位参考文档的初始包含块。

这种情况下，fixed 定位的元素脱离了文档流，它们不占用空间，也不会影响其他元素的布局。

子组件元素定位怎么设置在父级元素定位上面

在Vue中，子组件的定位通常是相对于父组件或者文档流来进行的。如果你想要让子组件的定位基于父级元素，你可以使用CSS的绝对定位（absolute positioning）或者固定定位（fixed positioning）。在这种情况下，你需要确保父组件具有相对定位（relative positioning），这样子组件的绝对定位就是相对于父组件的。

以下是一个Vue组件的示例，展示了如何设置子组件的定位基于父组件：

<template>
  <div class="parent" ref="parent">
    <div class="child" ref="child"></div>
  </div>
</template>

<script>
export default {
  name: 'PositioningExample'
}
</script>

<style scoped>
.parent {
  position: relative; /* 父元素设置为相对定位 */
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
}

.child {
  position: absolute; /* 子元素设置为绝对定位 */
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  background-color: #ff6666;
}
</style>

解释：
1. `.parent` 类定义了父组件，具有相对定位（`position: relative;`），这意味着它会创建一个定位上下文（positioning context）。
2. `.child` 类定义了子组件，具有绝对定位（`position: absolute;`）。它相对于最近的已定位祖先元素进行定位，这里就是 `.parent`。
3. 在这个例子中，子组件将会相对于父组件的位置偏移20像素。

这种方法通过CSS的定位机制来实现父子组件的定位关系。确保父组件设置了 `position: relative;` 是实现子组件绝对定位的关键。