可視性が隠されたままネストされたdivの外側の表示要素

これを実現したいと思います。トップのテキスト「ハッピーフルーツ」に注目してください。私はそれがその中に入れ子になっている間、ボックスの上にオーバーレイされたい。私はそれから行くとテキストはdivの内側にのままですが、私はそれをしながら、その上でそれの上に立って/上の行く方法を作ることができH1にmargin-top: -50px;を追加する場合可視性が隠されたままネストされた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>

それはまだ内部（html）にネストされていますか？私はz-indexで試してみましたが、うまくいきませんでした。

position: relative; top: -50px;

.slidesそれはoverflow:visible;上にある場合は、スライダの他のスライドはこのように、表示されますので、overflow: hidden;を持っています。

出典

2017-07-31 Panic

それは[あなたの前の質問]（https://stackoverflow.com/q/45418991/1548895）とは異なるのですか？ –

オーバーフローを追加すると：visible;その上にテキストが表示されますが、右（と左）側にはスライダーが表示されますので、実際にはそれを修正しませんでした（私は2番目のスライドが近い同じ黄色になるようにしてください）また、バックグラウンドグラディエントは仕事をしませんでした – Panic

あなたは私の答えをチェックし、正確にあなたがそれについて好きではないと言うことができますか？ –

問題は、collapsing marginです。

ボーダーを追加：1ピクセル透明、以下のコードソリューションのように、-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の外側の表示要素

答えて

関連する問題