Question

当position设置为绝对或固定时，left属性指定元素的左侧边缘与其包含块的左侧边缘之间的距离。（包含块是元素相对定位的祖先。）

我在相对元素中放置了一个固定元素，并将其'left'属性设置为某个值，该值应相对于其父div。但是它没有按预期工作。看到我的代码笔：https://codepen.io/iamnotstone/pen/PgdPrJ?&editable=true

文本应在红色框中。

$ sudo ufw allow 8000

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

.test {
  width: 500px;
  height: 132px;
  background-color: red;
  position: relative;
  left: 200px
}

h1 {
  position: fixed;
  top: 0px;
  width: 500px;
  margin: 0 auto;
  padding: 10px;
  left: 0px
}

Answer 1

根据文档：Fixed positioning

固定定位类似于绝对定位。唯一的区别是，对于固定位置的框，包含块是由视口建立的。

您可以使用 margin-left 属性代替 left ：

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}
.test{
  width: 500px;
  height: 132px;
  background-color: red;
  position: relative;
  left: 200px
}


h1 {
  position: fixed;
  top: 0px;
  width: 500px;
  margin: 0 auto;
  padding: 10px;
  margin-left: 0px
}

<div class='test'>
  <h1>Fixed positioning</h1>
</div>

Answer 2

这很奇怪。当我在其父级中设置转换属性时，一切都按预期工作！

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}
.test{
  width: 500px;
  height: 132px;
  background-color: red;
  position: relative;
  left: 200px;
  transform: translate(0) /* added this, and works as expected */
}


h1 {
  position: fixed;
  top: 0px;
  width: 500px;
  margin: 0 auto;
  padding: 10px;
  left: 0px
}

<div class='test'>
  <h1>Fixed positioning</h1>
</div>

最后，我找到了答案。

还有一条声明here：

如果position属性是固定的，则建立包含块   通过视口（对于连续介质）或页面区域（在   对于分页媒体）。



如果position属性为绝对值或   固定后，容纳块也可以由   具有以下内容的最接近祖先元素的填充框：

无变换值或透视图值

变换或透视的遗嘱值

除none以外的其他过滤器值或过滤器的意志改变值（仅在Firefox上有效）。

包含涂料的值（例如，包含：paint;）

Answer 3

如果使用position: fixed;，则将定义元素在视口中的位置。如果您使用position: absolute;，那么您将在元素的父级框中定义元素的位置。另外，CSS优先级代码也向下排列，因此例如在您的代码h1中是最优先的元素（不适用于类和ID，类优先于元素，ID优先于类）。

Answer 4

您需要将position: fixed用于文档正文，并将position: absolute用于具有position: relative父元素的元素，因此请将h1的位置更改为absolute：

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}
.test{
  width: 500px;
  height: 132px;
  background-color: red;
  position: relative;
  left: 200px;
  transform: translate(0) /* added this, and works as expected */
}


h1 {
  position: absolute;   // 
  top: 0px;
  width: 500px;
  margin: 0 auto;
  padding: 10px;
  left: 0px
}

将固定位置放在相对位置时如何工作

4 个答案: