相对内部的绝对定位 - 使用底部：0 似乎不起作用答案

【问题标题】：Absolute positioning inside relative - using bottom: 0 doesn't seem to work相对内部的绝对定位 - 使用底部：0 似乎不起作用
【发布时间】：2018-07-14 21:05:22
【问题描述】：

我正在尝试相对于包含 div 的底部定位项目。使用 position: relative 作为父元素，然后使用 position: absolute 作为子元素似乎可以按预期工作。（我用this article作为参考。）

我的问题是当我改变时：

top: 0;

到

bottom: 0;

对于其中一个内部元素，它会跳转到包含 div 的顶部。我希望它相对于灰色块的底部。

代码如下：

 .channeldiv {
      margin: 0px;
      position: relative;
      display: inline-block;
    }
    
    .channel_summary {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 50px;
      height: 50px;
      background-color: gray;
    }
    
    .channel_wrap {
      position: relative;
    }
    
    .inner_pink {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 30px;
      z-index: 3;
    }
    
    .inner_green {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 30px;
      z-index: 3;
    }
    
    .big_background {
      height: 73px;
      width: 128px;
      background-color: orange;
    }
    
    .overlaytext {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 100%;
      text-align: right;
      z-index: 3;
      background-color: black;
      color: lightgreen;
      font-family: monospace;
    }
    
    .trades_num {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 3;
      background-color: black;
      color: lightgray;
    }

<div class="channeldiv">
      <div class="big_background">
        <div class="channel_summary">
          <div class="channel_wrap">
            <svg class="inner_green" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <rect id="rect1" width="100%" height="100%" fill="green" />
            </svg>
            <span class="overlaytext">+1.00</span>
          </div>
        </div>
        <span class="trades_num">1</span>
      </div>
    </div>
    
    <div class="channeldiv">
      <div class="big_background">
        <div class="channel_summary">
          <div class="channel_wrap">
            <svg class="inner_pink" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <rect id="rect1" width="100%" height="100%" fill="pink" />
            </svg>
            <span class="overlaytext">+1.00</span>
          </div>
        </div>
        <span class="trades_num">2</span>
      </div>
    </div>

这是小提琴：https://jsfiddle.net/davemabe/h6cv7prs/

【问题讨论】：

请在在问题本身中包含重现问题的代码，而不仅仅是在外部站点上。您可以使用 Stack Snippets（编辑器中的图标类似于 <>）来执行此操作。
如果您在 Codepen 或类似设备上有一些代码，那就太好了。这样我就可以看看了。可能设置为 relative 的包装器不在您认为的位置。我倾向于在工作时将 CSS 中的边框添加到 div 中。然后我可以看到什么在哪里。如果您有代码，很乐意提供帮助:)
刚刚添加了代码。谢谢！
如果您删除 <div class="channel_wrap"> 及其对应的 </div> 是否会产生所需的设计？
@andyb - 实际上是的，它似乎可以解决问题！

标签： css css-position

【解决方案1】：

您不需要在channel_wrap 类中设置position: relative;，因为在这种情况下它会禁用其子定位。完成后，它可以按您的意愿工作。

您建议的文章只是彼此内部的两个定位（绝对相对），而您尝试做的是三重定位（绝对相对绝对），这不会产生您期望的结果.

事实上，如果你想像这样保持三倍，你至少需要给channel_wrap div，例如一个高度，这样它的孩子就会知道如何对他们父母的定位做出反应，只有这样他们才会知道他们应该底部到哪里。

有关positioning 和bottom 属性的更多信息

【讨论】：