Html 绝对div内绝对div相对于相对位置切断

我有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的内容？

绕过溢出。。 通过将元素的

位置设置为
fixed
，元素可以从
relative
或
absolute
定位的父元素溢出。具有
位置：固定
的元素将默认
左
、
右
、
顶部
和
底部
样式设置为
自动
。这将把
.d3
定位到
.d2
的左上角，然后
left:83px
样式将其推到左侧

填补额外的空间。。
但是，要将额外的移动作为原始标记向右移动，您需要添加
左边距：8px
，这将构成复制原始标记所需的额外~8px。需要通过设置
边距
样式来进一步调整
.d3
的位置（见下文）

更新后的代码应该如下所示。。
一些注意事项和注意事项。。
正如前面的评论员所提到的，最佳实践是修复html标记，因为如果您需要移动
.d3
的位置，此解决方案可能会导致问题。例如，设置
left
、
right
、
top
或
bottom
将导致此样式的默认设置
auto
被取消设置，并且元素将相对于视口而不是父
relative
或
absolute
元素定位。
这是不可能的。父元素上的
溢出：隐藏将始终隐藏溢出的子元素。还有其他方法可以解决这个问题，但是你必须重新构造你的HTML来实现它。也许这会帮助你：确保d3在d1的范围内，不是吗？我的意思是设置它的宽度：
left:83px；宽度：17px
.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;
}