Question

我有两个水平重叠的div。我的问题是其中一个div包含文本和一个不起作用的href链接。

你可以看到我在这里的代码 https://jsfiddle.net/jayreis/w7regdcr/

 .postwrapper
 {   
    margin:auto;
    width:80%;
    display:block;
    padding-bottom:15px;
 }
 .imageDiv
 {
        margin-left: 100px;
        background: #fff;
        display: block;
        width: 445px;
        height: 220px;
        padding: 10px;
      border-radius: 2px 2px 2px 2px;
 }
.imageDiv img
{
  width:600px;
  height:400px;
}
.textboxDiv
{
  position:relative;
  bottom:145px;
  left:470px;
  zoom: 1; /*to fix the has layout bug in IE older version*/
  filter: alpha(opacity=50);
  opacity: 0.9;
  background-color:#ffffff;
  text-align:center;
}
.textboxDiv:after
{
  content:'';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  border: #dddddd 2px solid

}
.readarticle
{
  text-decoration:none;
  border-top: 1px solid #a61531;
  float:left;
  color:#000000;
  z-index: 99999;
}


   <div class="postwrapper">
        <div class="imageDiv">
               <img src="http://www.ccc.com/media/post/image/6/0/600x400.png" />
        </div>
        <div class="imageDiv textboxDiv">
           <p style="color:#000000; margin-auto; width:35%; margin-left:-10px; padding-bottom:10px">date here
            </p>
           <h4><a href='http://www.ccc.com' title="" style="color:#000000; font-size:15px">the title</a></h4>
           <p style="color:#000000">desc here</p>
           <br />
            <p><a href="http://www.ccc.com" title="test" class='readarticle'>READ ARTICLE</a></p>
        </div>
    </div>

所以，如果你改变位置，你看看css：绝对;成立：相对;在类样式.textboxDiv：链接然后工作，但我松开了我需要的框边框样式。

任何建议我如何保持风格，但使链接在textboxDiv中工作？

Answer 1

.readarticle未定位，因此z-index不起作用。只需添加position: relative;即可。

  .readarticle
  {
    text-decoration:none;
    border-top: 1px solid #a61531;
    float:left;
    color:#000000;
    z-index: 99999;
+   position: relative;
  }

MDN Documentation: Z-Index

href链接无法处理重叠的div

1 个答案: