html - 使用 CSS 将元素移出使用溢出的容器

Question

我在下面有这个结构，基本上是一个 wrapper 和一个 content div，然后我使用 CSS overflow 以便内容可以在溢出时垂直滚动。

但是，我在 content 中有一个 span，我想使用 position: absolute 将其移出，但 span 是由于溢出属性，一旦超出内容就会隐藏。

.wrapper {
    width: 300px;
    background-color: #2f4050
}

.content {
    position: relative;
    height: 170px;
    overflow-x: hidden;
    overflow-y: visible;
    background-color: #e1ecf4;
    color: #404040;
}

.tit {
    position: absolute;
    top: 0;
    right: -40px;
    display: block;
    width: 70px;
    height: 70px;
    background-color: #07c;
    color: #fff;
    z-index: 999;
}

<div class="wrapper">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, at vix dicunt aliquam dignissim. Bonorum assentior liberavisse mei et. Recusabo moderatius in pri, te dicam contentiones mei, eam dicta inermis dissentiet eu. Usu ne malis minim reprimique, aeque audire sadipscing cu eos, et nihil latine qui.Lorem ipsum dolor sit amet, at vix dicunt aliquam dignissim. Bonorum assentior liberavisse mei et. Recusabo moderatius in pri</p>
    <span class="tit">Move this span outside</span>
  </div>
  
</div>

这里有什么解决方法吗？
注意:不能编辑 html

Answer 1

像这样移动 position:relative 到包装器:

编辑:绝对位置仅相对于具有相对位置的第一个父元素。如果你想让它相对于整个页面，你可以使用 position: fixed 以及替代方法。

.wrapper {
    width: 300px;
    background-color: #2f4050;
    position: relative;
}

.content {
    height: 170px;
    overflow-x: hidden;
    overflow-y: visible;
    background-color: #e1ecf4;
    color: #404040;
}

.tit {
    position: absolute;
    top: 0;
    right: -40px;
    display: block;
    width: 70px;
    height: 70px;
    background-color: #07c;
    color: #fff;
    z-index: 999;
}

<div class="wrapper">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, at vix dicunt aliquam dignissim. Bonorum assentior liberavisse mei et. Recusabo moderatius in pri, te dicam contentiones mei, eam dicta inermis dissentiet eu. Usu ne malis minim reprimique, aeque audire sadipscing cu eos, et nihil latine qui.Lorem ipsum dolor sit amet, at vix dicunt aliquam dignissim. Bonorum assentior liberavisse mei et. Recusabo moderatius in pri</p>
    <span class="tit">Move this span outside</span>
  </div>
</div>