样式href与相对元素位于相同位置

Question

嘿伙计们我使用的位置相对于设置我的代码的某些部分，问题是有一个href什么是HTML之前的类短语，所以它应该是它的父。但是把这个事实说成一个href部分在下面（检查图像）我该如何解决它并将其作为短语加入相同的位置？

。如果可能没有位置相对或绝对

，它会很酷

HTML：

 <div class="left">
    <img src="images/slider.png">
    <a href="#"><span class="shorttext"><h4>V posledných dnech se událo mnoho změn, které byli velice výrazné. Proto neváhajte a podívete se i vy na to, co se vlastne zmenilo a nebo nezměnilo kdo vi... </h4></span></a>
  </div>

CSS：

#news .left{
      width: 415px;
      background-color: #2d2d2d;
      height:229px;
      display:block;
      float:left;
      margin: 0px;
      float: left;    
    }

#news .left a{
    display: block;    
}

.shorttext{
    background-color: #000000;
    opacity: 0.8;
    position: relative;
    filter:alpha(opacity=80); /* For IE8 and earlier */
    width: 415px;
    height: 70px;
    color: #FFFFFF;
    display: block;
    bottom: 90px;
} 

实时预览：http://funedit.com/andurit/new/

Answer 1

如果你让href有以下css：

position:relative;
bottom:90px;

而不是shorttext。

e.g。使用您的代码将HTML更改为以下内容：

 <div class="left">
    <img src="images/slider.png">
    <a href="#" class="shorttexthref"><span class="shorttext"><h4>V posledných dnech se událo mnoho změn, které byli velice výrazné. Proto neváhajte a podívete se i vy na to, co se vlastne zmenilo a nebo nezměnilo kdo vi... </h4></span></a>
  </div>

更改.shorttext并添加.shorttexthref CSS：

.shorttext{
    background-color: #000000;
    opacity: 0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
    width: 415px;
    height: 70px;
    color: #FFFFFF;
    display: block;
} 
.shorttexthref {
    position: relative;
    bottom: 90px;}