顯示包含元素之外的文本

我想實現這一點。留意頂部文字'開心果'。當它嵌套在盒子中時，我想要覆蓋盒子。顯示包含元素之外的文本

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;

來源

2017-07-31 Panic

'H1 {位置：相對;頂部：-50px;}' – UncaughtTypeError

這不起作用，然後發生這種情況（檢查img在更新後） – Panic

'.slider {overflow：visible;}'看起來是一個簡單的溢出問題，事情是，應用此解決方案在所提供的代碼片段中是有效的，因此如果它不適用於您的生產環境，那麼您還沒有將其他樣式或因素包含在您提供給我們處理和排除故障的代碼中。 – UncaughtTypeError

有什麼不對調整<h1/>位置？您可以通過向.slider添加填充來抵消該位置。

.slider { 
    position: relative; <!-- necessary in case other position is set in ancestry --> 
    padding-top: 10px; 
} 
h1 { 
    position: absolute; 
    top: -10px; 
}

如果overflow: hidden;設置在.slider，你的頭會被切斷。否則，默認值爲overflow: visible;，您應該沒有問題。

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>

來源

2017-07-31 14:53:26

感謝您的輸入，但有人提到添加溢出：對.slider可見，並修復它 – Panic

使用絕對定位。

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: 1.2em; 
 
} 
 

 
h1, 
 
h2 { 
 
    text-transform: uppercase; 
 
    color: red; 
 
} 
 

 
h1 { 
 
    font-size: 11vw; 
 
    position: absolute; 
 
    top: -1.2em; 
 
} 
 

 
h2 { 
 
    font-size: 7vw; 
 
}

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

來源

2017-07-31 14:50:34 Gerard

您可以使用linear-gradient這裏爲box-shadow，您可以使用絕對定位pseudoelement（有需要的偏移量）。例如，40px偏移background-image: linear-gradient(to bottom, transparent 40px, orange 40px);。我們也應該使用top: 40px作爲僞元素。

演示：

body { 
 
    background: yellow; 
 
    padding: 50px; 
 
} 
 

 
.slider { 
 
    width: 100%; 
 
    height: 650px; 
 
    background-image: linear-gradient(to bottom, transparent 40px, orange 40px); 
 
    position: relative; 
 
} 
 

 
.slider:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 40px; 
 
    bottom: 0; 
 
    box-shadow: 0 0 78px 11px #F3286B; 
 
    /* don't overlap container */ 
 
    z-index: -1; 
 
} 
 

 
h1, 
 
h2 { 
 
    text-transform: uppercase; 
 
    color: red; 
 
} 
 

 
h1 { 
 
    font-size: 11vw; 
 
} 
 

 
h2 { 
 
    font-size: 7vw; 
 
}

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

來源

2017-07-31 15:18:49

顯示包含元素之外的文本

回答

相關問題