Bootstrap z-index问题

Question

我正在显示具有最大高度的面板，但它无法正常工作。

Z-Index无法正常工作。

<div class="col-md-4 col-sm-6 col-xs-6">
    <div class="panel panel-default">
        <div class="panel-heading">
            <img src="image">
        </div>
        <div class="panel-body">

        </div>
    </div>
</div>

Css codes：

panel-heading{
    text-align: center;
    max-height:200px;
    z-index: -9999;
}
.panel-heading img{
    z-index: -9999;
}
.panel-body{
    z-index: 9999;
}

所以图像显示如下：

图像应该在面板后面。我的意思是它包含身体。它不应该是这样的。

Answer 1

<强>更新

如果我理解正确，您希望在200px之后切断图像的高度，因为这是分配给max-height的{​​{1}}。请试试这个：

＆＃13;

＆＃13;

.panel-heading

＆＃13;

.panel-heading {
  text-align: center;
  max-height: 200px;
  overflow: hidden;
  position: relative;
}

＆＃13;

＆＃13;

＆＃13;

我使用的图片的高度为<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" /> <div class="col-md-4 col-sm-6 col-xs-6"> <div class="panel panel-default"> <div class="panel-heading"> <img width=" 100%" src="http://placehold.it/350x750"> </div> <div class="panel-body"> </div> </div> </div>，但由于我在750px上使用overflow: hidden，因此{{1}后图片的高度会被切断}}