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

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; ，父级变短并且按钮在父级之外。问题是如何将按钮推到父级内部让我们说从顶部到 10px（而不是从 100px）。

需要纯 CSS 解决方案。

Answer 1

在可以设置 max-height/min-height 的地方使用 position:absolute 并考虑 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>

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

Make a relative child element inside parent if parent height is short

html

css

position

css-position

vertical-alignment