css文字重叠_CSS文字重叠

css文字重叠

One of the important functions of CSS is to position elements. Margin, padding, top, left, right, bottom, position, and z-index are just a few of the major players in CSS positioning. By using the above spacing properties and the z-index "layering" property, we can make your elements overlap each other.

CSS的重要功能之一是定位元素。 Margin ， padding ， top ， left ， right ， bottom ， position和z-index只是CSS定位中的几个主要角色。 通过使用上面的interval属性和z-index“ layering”属性，我们可以使您的元素相互重叠。

View Demo 观看演示

XHTML (The XHTML)

<div id="element-1" class="element">David</div>
<div id="element-2" class="element">Walsh</div>
<div id="element-3" class="element">Blog</div>
<div id="element-4" class="element">Showing</div>
<div id="element-5" class="element">CSS</div>
<div id="element-6" class="element">Overlap</div>

Just a bunch of elements with text only. Simple.

只是一堆只有文字的元素。 简单。

CSS (The CSS)

.element		{ font-size:75px; position:absolute; }
#element-1		{ color:lightblue; z-index:1; }
#element-2		{ color:lightgreen; margin:30px 0 0 30px; z-index:2; }
#element-3		{ color:pink; margin:60px 0 0 60px; z-index:3; }
#element-4		{ color:yellow; margin:90px 0 0 90px; z-index:4; }
#element-5		{ color:orange; margin:120px 0 0 120px; z-index:5; }
#element-6		{ color:gray; margin:150px 0 0 150px; z-index:6; }

/* worded colors? awful! */

The major players in the CSS are the absolute positioning, the margin property, and the z-index.

CSS中的主要角色是绝对定位， margin属性和z-index 。

View Demo 观看演示

As lovely as the overlap is, CSS is still limited to the "safe" fonts, so text-only imagery is still necessary when we want to use "fun" fonts.

尽管有重叠之处，但CSS仍然仅限于“安全”字体，因此当我们要使用“有趣”字体时，纯文本图像仍然是必需的。

翻译自: https://davidwalsh.name/css-text-overlap-jquery-2

css文字重叠