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

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解决方案。

Answer 1

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

.parent {
  position:relative;
}

.button {
  position:absolute;
  right:10%;
  top:0;
  height:40%;
  min-height:30px;
  max-height:120px;
  display:flex;
  flex-direction:column;
}
button {
  margin-top:auto;
  background-color: green;
}

<div style="border:1px solid red;" class="parent">
  <div class="button"><button>
   The main thing in the text is here =>
  </button></div>
  <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 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 somesome 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
  </p>
</div>
<div style="border:1px solid red;" class="parent">
  <div class="button"><button>
   The main thing in the text is here =>
  </button></div>
  <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>
<div style="border:1px solid red;" class="parent">
  <div class="button"><button>
   The main thing in the text is here =>
  </button></div>
  <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 
  </p>
</div>

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