Question

我在下面有这个结构，基本上是echo('["user_name": "BOB"]');和wrapper div，然后我使用CSS溢出，所以内容可以在溢出时垂直滚动。

但是，content内有一个span，我希望使用content将其移出，但由于溢出，跨度会在内容中隐藏属性。

position: absolute

.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;
}

这里有任何解决方法吗？
注意：编辑html不是一个选项

Answer 1

移动位置：相对于包装器，如下所示：

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

使用CSS将元素移动到使用溢出的容器之外

1 个答案: