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

Question

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

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

请参阅以下代码片段以供进一步参考：

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

固定元素的位置总是相对于 viewport/window，从不相对于任何其他元素。

您唯一可以做的（使用 CSS）是使用 right: calc(50% - 250px); 作为其位置，使其与 500 像素宽居中 "parent" 元素的右边界右对齐，但这仅在屏幕更宽或等于 "parent" 元素的 max-width 时有效。

评论后添加：另外为宽度低于 500px 的屏幕添加媒体查询right: 0（感谢@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>

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

Applying Max-Width to a Fixed-Positioned Div Within a Relative-Positioned Div?

html

css

css-position

positioning