Question

我用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。

Answer 1

从overflow: hidden移除figure.card-profile，它就会脱颖而出。

请让我知道你的想法。谢谢！

＆＃13;

/* 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
}

＆＃13;

<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 -->

＆＃13;

Answer 2

删除溢出：从figure.card-profile隐藏它将自动在顶部

如何控制父元素中profile元素的位置？

2 个答案: