在可见度保持隐藏的情况下嵌套div外部的显示元素

我想实现此目的。留意顶部文字'开心果'。当它嵌套在盒子中时，我想要覆盖盒子。在可见度保持隐藏的情况下嵌套div外部的显示元素

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>

如果我当时去添加margin-top: -50px;到H1文本将留在div里面，但我怎么可以让它去上面/站在它就可以了，而它仍然嵌套在（html）内？我试过玩z-index，但没有奏效。

position: relative; top: -50px;

的.slides有overflow: hidden;，因为如果它是overflow:visible;滑块的其他幻灯片将展现出来，像这样。

来源

2017-07-31 Panic

它是如何从[您刚才的问题]不同的（https://stackoverflow.com/q/45418991/1548895）？ –

如果我添加溢出：可见;文本会出现在它上面，但是在右侧（和左侧），它会显示幻灯片，因为它是一个滑块，所以没有真正解决它（我只是注意到它后一秒，因为第二张幻灯片接近是同样的黄色。）此外，背景渐变没有做这项工作 – Panic

你可以检查我的答案，并说出你不喜欢的东西吗？ –

问题是因为collapsing margin。

添加边框：1px实心透明;滑块类，并给予像-40px这样的h1标签的负边距，如下面的代码解决方案。

body { 
 
    background: yellow; 
 
    padding: 50px; 
 
} 
 
.slider { 
 
    width: 100%; 
 
    height: 650px; 
 
    margin-top: 40px; 
 
    background: orange; 
 
    box-shadow: 0 0 78px 11px #F3286B; 
 
    border: 1px solid transparent; 
 
} 
 
h1, h2 { 
 
    text-transform:uppercase; 
 
    color: red; 
 
} 
 
h1 { 
 
    font-size: 11vw; 
 
    margin-top: -40px; 
 
} 
 
h2 { 
 
    font-size: 7vw; 
 
}

<body> 
 
<div class="slider"> 
 
<h1> 
 
Happy Fruit 
 
</h1> 
 
<h2> 
 
HELLO WORLD 
 
</h2> 
 
</div> 
 
</body>

来源

2017-07-31 17:49:27 Shivam

在可见度保持隐藏的情况下嵌套div外部的显示元素

回答

相关问题