在包含元素之外显示文本 [英] Display text outside of containing element
问题描述
我想实现这一目标.请留意最上方的文字快乐的水果" .我希望将其嵌套在其中时将其覆盖.
I want to achieve this. Keep an eye on the top text 'Happy Fruit'. I want to be overlayed of the box while it's nested inside it.
body {
background: yellow;
padding: 50px;
}
.slider {
width: 100%;
height: 650px;
margin-top: 40px;
background: orange;
box-shadow: 0 0 78px 11px #F3286B;
}
h1, h2 {
text-transform:uppercase;
color: red;
}
h1 {
font-size: 11vw;
}
h2 {
font-size: 7vw;
}
<body>
<div class="slider">
<h1>
Happy Fruit
</h1>
<h2>
HELLO WORLD
</h2>
</div>
</body>
如果我随后在h1上添加margin-top: -50px;，则文本将保留在div内，但是当它仍处于嵌套状态时，如何使其在上面/位于上面内(html)?我试过玩z-index，但这没用.
If I then go and add a margin-top: -50px; to the h1 the text will stay inside the div, but how can I make it going above/standing on it on it while it's still being nested inside (html)? I've tried playing with z-index but that didn't work.
position: relative; top: -50px;
推荐答案
调整<h1/>的位置有什么问题?您可以通过在.slider上添加填充来抵消位置.
What's wrong with adjusting the position of <h1/>? You can offset the position by adding padding to .slider.
.slider {
position: relative; <!-- necessary in case other position is set in ancestry -->
padding-top: 10px;
}
h1 {
position: absolute;
top: -10px;
}
如果在.slider上设置了overflow: hidden;，则标题将被切断.否则，默认值为overflow: visible;，您应该不会遇到任何麻烦.
If overflow: hidden; is set on .slider, your header will be cut off. Otherwise the default is overflow: visible; and you should have no trouble.
body {
background: yellow;
padding: 50px;
}
.slider {
width: 100%;
height: 650px;
margin-top: 40px;
background: orange;
box-shadow: 0 0 78px 11px #F3286B;
position: relative;
padding-top: 10px
}
h1,
h2 {
text-transform: uppercase;
color: red;
}
h1 {
font-size: 11vw;
position: absolute;
top: -10px;
}
h2 {
font-size: 7vw;
}
<body>
<div class="slider">
<h1>
Happy Fruit
</h1>
<h2>
HELLO WORLD
</h2>
</div>
</body>
这篇关于在包含元素之外显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
