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

问题描述

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

我的问题是当我改变时：

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/

标签： csscss-position

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

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

事实上，如果你想像这样保持三倍，你至少需要给那个channel_wrapdiv，例如一个高度，这样它的孩子就会知道如何对他们的父母定位做出反应，然后他们才会知道他们应该在哪里触底.

有关定位和底部属性的更多信息

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

问题描述

解决方案

推荐阅读