html-如何重疊Div包含父Div上的鏈接？

Question

我有div包含2個Div，一個用於image-thumbnail ，另一個包含link 。 但是，每當我單擊“ link-div”上的鏈接時 ，它總是顯示我不期望的模態窗口。 應該正常打開鏈接，而不是模式對話框。 僅供參考，右鍵單擊可正常打開鏈接 。 以下是代碼：

<div class="col-sm-4"> 
    <div  id="<?php echo $row['filename']?>" class="thumbnail" style="height:205px;width:337px;background-image:url('<?php echo base_url().'/uploads/thumb/'.$row['thumbnail']; ?>')">
        <div onClick="loadModal();" style="position: absolute;bottom:40%;left:40%;"> 
            <img  src="<?php echo base_url(); ?>/uploads/thumb/play-button.png" />
        </div>
        <div style="z-index:1; position:relative;" class="thumb_text">
            <h5 >&nbsp;Kiriman : <a href="<?php echo base_url();?>cms/detail/<?php echo $row['iduser'];?>"><u><?php echo $row['nama'];?></u></a></h5>
        </div>
    </div>                   
</div>

模態代碼：

function loadModal()
{
  $("div.modal-bg").show();
  $("div.modal-bg").fadeTo("slow", .5);
  $("div#simpleModal").addClass("show");
}   

模態的CSS：

div#simpleModal.show
{
    opacity: 1; 
    z-index: 100;        
    -webkit-transition-duration: 0.25s; 
} 

我在包含鏈接的第二分區中包含了style="z-index:1" ，但仍然失敗。

Answer 1

因為您是從父div調用loadModal()函數

所以像這樣改變你的功能

<div class="col-sm-4"> 
<div  class="thumbnail" style="height:205px;width:337px;background-image:url('<?php echo base_url().'/uploads/thumb/'.$row['thumbnail']; ?>')">
    <div onClick="loadModal();" id="<?php echo $row['filename']?>" style="position: absolute;bottom:40%;left:40%;"> 
        <img  src="<?php echo base_url(); ?>/uploads/thumb/play-button.png" />
    </div>
    <div style="z-index:1" class="thumb_text">
        <h5 >&nbsp;Author : <a href="<?php echo base_url();?>cms/detail/<?php echo $row['iduser'];?>"><u><?php echo $row['name'];?></u></a></h5>
    </div>
</div>                   

Answer 2

請嘗試以下代碼<div style="z-index:1; position:relative;" class="thumb_text"> <div style="z-index:1; position:relative;" class="thumb_text">因為z索引不適用於靜態位置（默認位置：靜態）