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>

css

阅读 7.2k

4 个回答

秋刀鱼Bin

✓ 已被采纳

谢邀，我建议你改成这样：

<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.