Question

我希望侧边栏从页面上的任何偷渡行为中排除-就是position:fixed。

但是我希望它作为父容器位于wrap内，并且right:0来自wrap而不是窗口。

如何执行此操作？

.wrap{width:250px; margin:0 auto; height:100vh;background:silver;}
.sidebar{position:fixed;top:0;right:0;height:100vh;background:gold;}

<div class='wrap'>
<div class='sidebar'>sidebar</div>
</div>

Answer 1

一个想法是不定义right并告诉浏览器使用 static 位置。为此，您需要确保静态位置在右侧。

在此示例中，您必须调整方向（并对其内容进行重置）

.wrap {
  width: 250px;
  margin: 0 auto;
  height: 150vh;
  background: silver;
  direction:rtl;
}

.sidebar {
  position: fixed;
  top: 0;
  height: 100vh;
  background: gold;
}

.wrap > div:last-child {
  direction:ltr;
}

body {
 margin:0;
}

<div class='wrap'>
  <div class='sidebar'>sidebar</div>
  <div> some content</div>
</div>

来自the specification：

在本节及下一节中，（元素的）“静态位置”一词大致是指元素在正常流中应具有的位置。

然后

如果'left'，'width'和'right'的全部三个均为'auto'：首先将'margin-left'和'margin-right'的所有'auto'值设置为0。然后，如果建立静态位置包含块的元素的“ direction”属性为“ ltr”，将“ left”设置为静态位置，并在下面应用规则三；否则，将“ right”设置为静态位置，然后应用下面的第一条规则。

这里是position:sticky

的另一个想法

.wrap {
  width: 250px;
  margin: 0 auto;
  height: 150vh;
  background: silver;
}

.sidebar {
  position: sticky;
  float:right; /* Yes float!*/
  top: 0;
  height: 100vh;
  background: gold;
}


body {
 margin:0;
}

<div class='wrap'>
  <div class='sidebar'>sidebar</div>
  <div> some content</div>
</div>

固定div但在特定容器内

1 个答案: