Question

任何人都有任何想法如何让我的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;
}

Answer 1

您必须向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

}

Answer 2

Absolute positioned元素始终显示在相对元素之上。但您可以通过调整z-index property来解决问题。同时调整一些定位以调整结果。

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

DEMO此处： http://jsfiddle.net/zzLus/2/

使文本显示在引号的顶部

2 个答案: