html - absolute div inside absolute div 相对于相对位置被切断

Question

我有 3 个 div，每个 div 都有以下 CSS。

.d1 {
    position: relative;
    background-color: yellow;
    height: 50px;
    width: 100px;
    overflow: hidden;
}

.d2 {
    position: absolute;
    background-color: green;
    height: 25px;
    width: 50px;
}

.d3 {
    position: absolute;
    left: 83px;
}

具有类的div如下:

<div class="d1">
  <div class="d2">
    <div class="d3">text</div>
  </div>
</div>

结果我看到 d3 的内容由于溢出而被截断:隐藏在 d1 中。

如何在不修改d1的情况下避免截断d3的内容？

Answer 1

绕过溢出..

通过将元素的 position 设置为 fixed，元素可以从 relative 或 absolute 定位的父级溢出。具有 position: fixed 的元素将具有默认的 left、right、top 和 bottom 样式设置为 auto。这会将 .d3 定位到 .d2 的左上角，然后 left: 83px 样式会将其从那里推到左侧.

弥补额外的空间..

但是，要像原始标记一样向右移动，您需要添加 margin-left: 8px，这将弥补复制原始标记所需的额外 ~8px .需要通过设置 margin 样式来进一步调整 .d3 的位置(见下文)。

更新后的代码应该是这样的..

.d1 {
   position: relative;
   background-color: yellow;
   height: 50px;
   width: 100px;
   overflow: hidden;
}

.d2 {
  position: absolute;
  background-color: green;
  height: 25px;
  width: 50px;
}

.d3 {
 position: fixed;
 margin-left: 8px;
 left: 83px;
}

一些注意事项和注意事项..

正如之前的评论者所提到的，最佳做法是修复您的 html 标记，因为如果您需要移动 .d3 的位置，此解决方案可能会导致问题。比如设置left,right,top,或者bottom会导致默认设置这个样式，auto，从未设置开始，元素将相对于视口(viewport)而不是父 relative 或 absolute 元素定位。