使文字出现在报价顶部

-1

任何人有任何想法如何让我的h1文字出现在报价顶部？使文字出现在报价顶部

注：

我不希望它看起来像是报价是H1文本之前，但在它的上面。
引用应该在HTML中没有任何额外的标记或文本时出现。

HTML

<div> 
<h1>Title</h1> 
</div>

CSS

div { 
    position: relative; 
} 
div:after { 
    font-size: 100px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    content:'"'; 
    color: red; 
} 
h1 { 
    padding: .5em; 
}

来源

2014-07-21 Cofey

你必须给h1一个z-index value

JSfiddle Demo

div { 
    position: relative; 
} 
div:after { 
    font-size: 100px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    content:'"'; 
    color: red; 
} 
h1 { 
    padding: .5em; 
    position: relative; 
    z-index:1 

}

来源

2014-07-21 16:13:35

谢谢！我尝试了几种不同的技巧，但我缺少的一件事是：相对的;当我使用z-索引。 – Cofey

Absolute positioned元素始终显示在相关元素的顶部。但是你可以通过调整z-index property来修复它。也调整一些定位来调整你的结果。

h1 { 
    padding: .5em; 
    position: absolute; 
    z-index: 2; 
    top: -18px; 
    left: -10px 
}

DEMO这里：http://jsfiddle.net/zzLus/2/

来源

2014-07-21 16:14:49

使文字出现在报价顶部

回答

相关问题