如果父母身高较短，请在父母内创建相对子元素

Question

最近，我得到了一个类似的SO question，答案很聪明。但是，该答案和该问题不适用于当今情况。现在，按钮下方有文字。这是代码：https://jsfiddle.net/Lo4362rk/

button {
  float: right;
  position: relative;
  right: 10%;
  top: 100px;
  max-top: 10px;
  background-color: green;
}
.third-party-block {
  //display: none;
}

和

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

。third-party-block是动态的，有时不显示。结果，由于top：100px，父级变得更短，按钮变得不在父级之外。问题是如何在父级内部按下按钮，比起顶部10像素（而不是100像素）。

需要纯CSS解决方案。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9rRWRaMy5wbmcifQ==” alt =“在此处输入图像描述”>“ >>

最近，我有一个类似的问题，答案很出色。但是，该答案和该问题不适用于当今情况。现在，按钮下方有文字。这是代码：https：...

Answer 1

使用位置：可以在其中设置max-height / min-height的绝对位置，并考虑height的百分比值：