Question

已将转换添加到父级。为孩子准备的固定使用位置，希望将孩子固定放置在父级客户窗口的底部，不受滚动影响。显然不是。似乎是固定的==绝对的。为什么？

出于记录，MDN指出：

如果position属性为绝对或固定，则包含块也可以由最近的填充框的边缘形成具有以下内容的祖先元素：变换或透视图没有价值。

<body>
  <section>
    <p>This is Fixed</p>
    <div>This is a paragraph!</div>
    <div>This is a paragraph!</div>
    <div>This is a paragraph!</div>
    <div>This is a paragraph!</div>
    <div>This is a paragraph!</div>
    <div>This is a paragraph!</div>
    <div>This is a paragraph!</div>
    <div>This is a paragraph!</div>
    <div>This is a paragraph!</div>
    <div>This is a paragraph!</div>
    <div>This is a paragraph!</div>
  </section>
</body>

CSS

body {
  background: beige;
}

section {
  transform: rotate(0deg);
  overflow-y:auto;
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  position: fixed;
  display:flex;
  align-items:center;
  justify-content:center;
  bottom:0;
  width: 100%;   /* == 200px */
  height: 30px;  /* == 40px */
  background: cyan;
  margin:0
}

为什么固定位置的行为类似绝对位置

0 个答案: