将最大宽度应用于相对定位的 Div 中的固定位置的 Div？

Question

将相对 div 中的固定 div 向右对齐，同时仍保留继承的 max-width 的最佳方法是什么？

更新（2018 年 1 月 24 日）：我已经用解决方案回答了这个问题。见here。

请参阅以下 sn-p 以获得更多参考：

body {
  margin: 0;
  padding: 0;
  border: 0;
}

.container {
  width: 100%;
}

.max-width {
  margin: 0 auto;
  max-width: 500px;
  height: 1000px;
  position: relative;
  box-sizing: border-box;
  background-color: lightgrey;
}

.box {
  max-width: inherit;
  width: 20%;
  height: 20px;
  position: fixed;
  background: blue;
  float: right;
  color: white;
  text-align: center;
  right: 0;
}

<div class="container">
  <div class="max-width">
    <div class="box">fix to right?</div>
  </div>
</div>

Answer 1

固定元素的位置总是相对于视口/窗口，而不是任何其他元素。

您唯一能做的（使用 CSS）是使用 right: calc(50% - 250px); 使其位置与 500 像素宽的居中“父”元素的右边框对齐，但这仅在屏幕为大于或等于“父”元素的max-width。

在 cmets 之后添加：另外使用 right: 0 为宽度低于 500 像素的屏幕添加媒体查询（感谢 @MrLister）

body {
  margin: 0;
  padding: 0;
  border: 0;
}

.container {
  width: 100%;
}

.max-width {
  margin: 0 auto;
  max-width: 500px;
  height: 1000px;
  position: relative;
  box-sizing: border-box;
  background-color: lightgrey;
}

.box {
  max-width: inherit;
  width: 20%;
  height: 20px;
  position: fixed;
  top: 0;
  right: calc(50% - 250px);
  background: blue;
  float: right;
  color: white;
  text-align: center;
}

@media (max-width: 500px) {
  .box {
    right: 0px;
  }
}

<div class="container">
  <div class="max-width">
    <div class="box">fix to right?</div>
  </div>
</div>

Answer 2

如果你这样做会怎样：

CSS

body {
  margin: 0;
  padding: 0;
  border: 0;
}

.container {
  width: 100%;
}

.max-width {
  margin: 0 auto;
  max-width: 500px;
  height: 1000px;
  position: relative;
  box-sizing: border-box;
  background-color: lightgrey;
}

.box {
  max-width: inherit;
  width: 20%;
  height: 20px;
  position: fixed;
  top: 0;
  right: calc(50% - 250px);
  background: blue;
  float: right;
  color: white;
  text-align: center;
}

@media screen and (max-width: 500px) {
.box {
      right: 0;
    }
}

@media screen and (min-width: 501px) {
.box {
      width: 100px; /* 100px is 20% of the max-width */
    }
}

HTML

<div class="container">
  <div class="max-width">
    <div class="box">fix to right?</div>
  </div>
</div>

Answer 3

想出了点办法。毕竟是可以做到的！

body {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
}

.max-width {
  max-width: 500px;
  height: 2000px;
  margin: auto;
  background-color: lightgrey;
  position: relative;
}

.box1 {
  position: relative;
  width: 20%;
  height: 100px;
  background-color: yellow;
  text-align: center;
}

.container {
  position: absolute;
  width: 60%;
  background-color: purple;
  height: 100%;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}

.wrap-box {
  position: fixed;
  max-width: 500px;
  width: 100%;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.wrap-box > div.box2 {
  width: 20%;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
}

.wrap-box > div.box3 {
  width: 20%;
  height: 100px;
  background-color: green;
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: center;
}

<div class="max-width">
  <div class="box1">position: relative, width: 20%</div>
  <div class="container">
    position: absolute, width: 60%
    <div class="wrap-box">
      <div class="box2">position: fixed (top), width: 20%</div>
      <div class="box3">position: fixed (bottom), width: 20%</div>
    </div>
  </div>
</div>