我在下面有这个结构,基本上是一个 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
最佳答案
像这样移动 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>
关于html - 使用 CSS 将元素移出使用溢出的容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50121818/