相对位置内的绝对定位-使用bottom：0似乎不起作用

Question

我正在尝试相对于包含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/

Answer 1

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

您建议的文章只是彼此之间的两个定位（相对位置是绝对位置），而您尝试做的是三重定位（相对位置是绝对位置相对值），这不会导致您期望的结果

实际上，如果您希望像这样将其保持三倍，则需要至少给该channel_wrap div，例如高度，以便其孩子知道如何对父母的位置做出反应，然后他们才知道应该将他们打底到哪里。

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