css absolute 文字下沉问题
本文介绍了css absolute 文字下沉问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
为什么我使用了absolute之后，div里面的文字会下沉呢？
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.s3pic{
position: relative;
margin-bottom: 20px;}
.pic2{
width: 458px;
height: 275px;}
.opwrap{
position: absolute;
height: 61px;
width: 458px;
bottom: 0;}
.wrap{
position: absolute;
width: 458px;
height: 61px;
opacity: 0.3;
background-color: black;}
.line{
display: inline-block;
margin:8px 0 9px 25px;
width: 3px;
height: 44px;
background-color: #72b16a;}
.bigword{
margin:0 10px;
font-size: 26px;
color:#fff;}
.sword{
color: #72b16a;
font-style: italic;
word-spacing: 140%;}
</style></head>
<body>
<div class="s3pic">
<img class="pic2" src="images/2.jpg">
<div class="opwrap">
<div class="wrap"></div>
<div class="line"></div>
<span class="bigword">前端技术</span>
<span class="sword">前端技术前端技术</span>
</div>
</div></body>
</html>
解决方案
谢邀，我建议你改成这样：
<style type="text/css">
.s3pic{
position: relative;
margin-bottom: 20px;
height: 275px;
}
.pic2{
width: 458px;
height: 275px;
}
.opwrap{
position: absolute;
height: 60px;
width: 458px;
bottom: 0;
}
.wrap{
position: absolute;
width: 458px;
height: 60px;
opacity: 0.3;
filter:alpha(opcity=30);
background-color: black;
}
.bigword{
border-left: #72b16a solid 3px;
padding: 8px 20px;
display: inline-block;
margin: 7px 10px 7px 20px;
font-size: 26px;
color:#fff;
}
.sword{
color: #72b16a;
font-style: italic;
word-spacing: 140%;
}
</style>
<div class="s3pic">
<img class="pic2" src="images/2.jpg">
<div class="opwrap">
<div class="wrap"></div>
<span class="bigword">前端技术</span>
<span class="sword">前端技术前端技术</span>
</div>
</div>--至于你上面的BUG，不是因为你使用了absolute下沉的，而是因为那个line设置了inline-block，后面就跟着对齐了，你可以设置后面的span,vertical-align:middle；什么的但是我建议你直接给bigword添加border.
这篇关于css absolute 文字下沉问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
