css - 相对内的绝对定位 - 使用底部 : 0 doesn't seem to work

Question

我正在尝试相对于包含的 div 的底部定位一个元素。对父元素使用 position: relative 然后对子元素使用 position: absolute 似乎按预期工作。 (我使用了 this article 作为引用。)

我的问题是当我改变时:

top: 0;

到

bottom: 0;

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

代码如下:

 .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>



   

这是 fiddle :https://jsfiddle.net/davemabe/h6cv7prs/

Answer 1

您不需要在 channel_wrap 类中设置 position: relative;，因为在这种情况下它会禁用其子定位。这样做之后，它就会如您所愿地工作。

您建议的文章只是彼此内部的两个定位(绝对相对)，而您要尝试做的是三重定位(绝对相对相对)这不会导致您期望的结果.

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

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