Html 从顶部减少一个DIV的高度

我有一个DIV放在YouTube视频iframe上

我想做的是减少叠加

DIV（.thebox）

的高度

举个例子，像这样

我知道我可以从底部设置高度，但不，我想做的是从顶部到底部降低高度

假设我想将覆盖DIV的大小从

300px

（这意味着YouTube视频将从上到下以300px清晰可见）

它可以是任何数量，300px，200px，50px。我将从数据库中插入CSS源的数量

.the-box { 
    reduce-from-top: <?php echo $size ?>px; 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 999; 
    background-color: white; 
    opacity: 0.5; 
}

。框{
从顶部减少：px；
位置：绝对位置；
左：0px；
右：0px；
宽度：100%；
身高：100%；
z指数：999；
背景色：白色；
不透明度：0.5；
}

设置

溢出：在父级上隐藏
，并使用
顶部
位置值似乎是您所需要的


。单击{
位置：绝对位置；
左：0px；
右：0px；
顶部：100px；
/*这是任意值*/
宽度：100%；
身高：100%；
z指数：999；
背景色：红色；
不透明度：0.5；
}
。单击：悬停{
背景色：#bada55；
}
.集装箱{
位置：相对位置；
溢出：隐藏；
/*阻止覆盖层扩展到容器之外*/
}
iframe{
显示：块；
}
我自己想出了答案

只需将高度设置为
auto
，并将
top
设置为要减小的尺寸

.the-click { 
  position: absolute; 
  left: 0px; 
  right: 0px; 
  bottom: 0; 
  top: 100px; 
  width: 100%; 
  height: auto; 
  z-index: 999; 
  background-color: white; 
  opacity: 0.5;
 }


希望这对其他人有帮助。：）
 使用！在容器上，设置
display:flex
和
align items:flex end
，然后像通常一样在内部div上设置CSS。
flex-end
值使其粘在容器底部


div.outer{
对齐项目：柔性端；
背景色：红色；
显示器：flex；
高度：100px；
宽度：100px；
填充：10px；
}
内分区{
背景颜色：粉红色；
身高：50%；
宽度：100%；
}

设置底部css。然后它将被钉在底部，而不是顶部。再来一次，你想在这方面取得什么成就
.the-click { 
  position: absolute; 
  left: 0px; 
  right: 0px; 
  bottom: 0; 
  top: 100px; 
  width: 100%; 
  height: auto; 
  z-index: 999; 
  background-color: white; 
  opacity: 0.5;
 }