如果父级高度短，则在父级内创建一个相对子元素

Question

最近我有一个类似的SO 问题，答案很好。 但是，那个答案和那个问题不适用于今天的情况。 现在按钮下面有文本。 这是代码： 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; ，父级变得更短，并且按钮变得超出了父级。 问题是如何按下父级内部的按钮让我们说从顶部到 10px（而不是从 100px）。

需要纯 CSS 解决方案。

Answer 1

使用 position:absolute 可以设置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>