1
私はHTMLとCSSでプロファイルを書きます。 要素を位置に制御して前面に送るときに問題があります。親要素のプロファイル要素の位置を制御する方法は？
/* profile custom */
.service-container {
background: url('http://images.indianexpress.com/2016/05/love-autumn-tree_759_thinkstockphotos-177812216.jpg');
height:500px;
width: 400px;
}
.layer {
background-color: rgba(0, 179, 0, 0.6);
width: 100%;
height: 100%;
}
figure.card-profile {
font-family: roboto_regular;
border-style: solid;
border-width: 1px;
border-color: rgb(255, 255, 255);
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
width: 100%;
color: #333;
text-align: left;
}
figure.card-profile img {
max-width: 100%;
vertical-align: middle;
border-style: solid;
border-width: 6px;
border-color: rgb(255, 255, 255);
height: 90px;
width: 90px;
border-radius: 50%;
margin: 40px 0 0 10px;
}
figure.card-profile p {
display: block;
border-radius: 0px;
position: relative;
color: #fafafa;
padding: 25px 50px 30px 50px;
font-size: 1.3em;
font-weight: 500;
margin: 0;
line-height: 1.6em;
}
figure.card-profile .author {
position: absolute;
bottom: 45px;
padding: 0 10px 0 120px;
margin: 0;
text-transform: uppercase;
color: #ffffff;
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
figure.card-profile .author h5 {
opacity: 0.8;
margin: 0;
font-weight: 800;
}
figure.card-profile .author h5 span {
font-weight: 400;
text-transform: none;
padding-left: 5px;
}
figure.card-profile .img-content-card {
position: absolute;
top: 250px;
left: 10%;
z-index: 999
}<div class="service-container">
<div class="layer">
<figure class="card-profile">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni eveniet voluptate fugit facere accusantium ipsum possimus quae nihil consequuntur saepe distinctio ad quaerat, laudantium deserunt facilis, odit perferendis eaque. Modi?
</p>
<div class="img-content-card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample3.jpg" alt="sq-sample3" />
<div class="author">
<h5>Pelican Steve </h5>
<span> Ceo, Psdfreebies.com</span>
</div>
</div>
</figure>
</div> <!--/.layer -->
</div> <!-- service-container -->私はimg-content-cardを制御し、すべての要素の前に送信することはできません。
私はこのようなコードを持っています。
私はこのようなこの番組たい：
私はz-index: 999を設定してみました。
自動的に一番上になりますfigure.card-プロファイルから隠さありがとうございました。 –