CSS文字沉到元素的底部
分类：实例代码
CSS文字沉到元素的底部属于前端实例代码，有关更多实例代码大家可以查看。
在实际应用中可能有这样的需求，那就是将指定的文本沉降到元素的底部。
下面就通过代码实例介绍以下如何实现此效果。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#box{
width:200px;
height:100px;
background:#CCC;
position:relative;
}
#box span{
position:absolute;
bottom:0px;
}
</style>
</head>
<body>
<div id="box">
<span>前端教程网</span>
</div>
</body>
</html>
上面的代码实现了我们的要求，原理也是比较简单的。
将文本放置于span元素之内，然后设置span元素为绝对定位，将其定于box元素底部即可。
box元素要要采用相对定位，这样span元素的定位参考对象才能够是box元素。
CSS文字沉到元素的底部，这样的场景在实际项目中还是用的比较多的，关于CSS文字沉到元素的底部就介绍到这了。