我如何让子元素逃脱溢出的父母：隐藏而不打破我的布局？

Question

.parent {
  position: relative;
  height: 350px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

父母包含一个子元素（a<div>

或

<span>

），我希望这个孩子通过使用负边缘或定位来视觉上移动父母的边界。

问题是，由于父母有

overflow: hidden

，所以孩子被割伤，不会在父母的边界之外显示出来。 我无法删除父母，因为将其删除会破坏页面上其他元素的设计，例如图像或容器。

这里是我正在与之合作的简单示例：

overflow: hidden

和Child

CSS：

<div class="parent">
  <!-- Other content inside the parent -->
  <div class="child">
    activity name
  </div>
</div>

目前，子元素被切割而不出现在父母之外。 我尝试了

调整我的边缘和绝对定位

调整z-index

transform

我正在寻找的是一种方法：

允许孩子逃脱父母并出现在其边界之外。

保存父母，以便其他元素（例如图像）不会意外破裂或溢出。

有人可以为此提出解决方案吗？

• 当父母的溢出被隐藏时，您无法使元素出现在父母之外。 您可以使用
CSS锚定位
• （目前在FF或Safari中支持）模拟此行为。
将子元素从父母身上移出，并使用锚将其放在原始位置：

.child {
  position: absolute;
  padding: 5px 10px;
  min-width: 50%;
  color: #fff;
  background: rgb(255, 145, 0);
  top: 0;
  right: -15px;
  z-index: 1;
  border-radius: 10px 0 0 10px;
  font-weight: bolder;
}

overflow: hidden