保持相对定位 child 在 parent 块内 max-top 等价物需要

Question

有一个html代码https://jsfiddle.net/1t68bfex/

button {
  position: relative;
  top: 100px;
  left: 150px;
  max-top: 10px;
}

.third-party-block {
  //display: none;
}

<div style="border:1px solid red;">
  <button>
       The text from the left is beautiful
      </button>
  <div class="third-party-block">
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
  </div>
</div>

这里的问题是 third-party-block 是动态的，如果不显示，按钮应该保持在顶部附近。如果 parent 的高度太短，则应更改 top:100px。

所以，我正在寻找类似 max-width 的宽度等价物，但对于我的情况也是如此。 需要纯 CSS 溶液。

Answer 1

可以考虑使用flexbox来实现：

.container {
  border: 1px solid red;
  display: flex;
}

button {
  margin-top:10px;
  align-self:flex-end;
}
.button {
  order: 1;
  max-height:100px;
  display:flex;
}

<div class="container">
  <div class="button"><button>
   The text from the left is beautiful
  </button></div>
  <div class="third-party-block">
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
  </div>
</div>
<div class="container">
  <div class="button"><button>
   The text from the left is beautiful
  </button></div>
  <div class="third-party-block">
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
        <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
  </div>
</div>
<div class="container">
  <div class="button"><button>
   The text from the left is beautiful
  </button></div>
  <div class="third-party-block">
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
  </div>
</div>
<div class="container">
  <div class="button"><button>
   The text from the left is beautiful
  </button></div>
  <div class="third-party-block">
    <p>
      some text comes here
    </p>
  </div>
</div>

保持相对定位 child 在 parent 块内 max-top 等价物需要

Keep relatively positioned child within parent block max-top equivalent needed

html

css

position

css-position

vertical-alignment