创建一个领英风格的个人资料栏

Question

https://jsfiddle.net/yxsc3cqy/

无法创建类似于配置文件页面中链接的外观，我创建的任何行都被前一行隐藏了。问题是什么，我怎样才能得到更好的造型。谢谢

<div class="row">
    <img src="http://placehold.it/110x110" alt="" class="myProfilPic">
    <img src="http://placehold.it/138x10" alt=""  class="coverPic">
    <div class="seperator"></div>
  </div>



.myProfilPic{
    position: absolute;
    margin: 90px 0px 0px 130px;
    border-radius: 50px;
    border: 3px solid #BADA55;
    cursor: pointer;
    z-index: 2;
}

.seperator{
    z-index: 1;
    position: absolute;
    height:3px;
    width:100vw;
    background:#000;
    border-bottom:1px solid #fff;
    margin-top: 138px;
}
.coverPic{
    z-index: 1;
    position: absolute;
    height: 138px;
    width:100vw;
}

Answer 1

您创建的新行被前一行隐藏，因为行内元素的 position，特别是 .coverPic 元素，设置为 absolute。

解决方案
像这样更改 .coverPic 元素的位置：

    .coverPic {
        z-index: 1;
        position: relative;
        height: 138px;
        width:100vw;
    }

已更新 Fiddle：https://jsfiddle.net/yxsc3cqy/1/

阅读 CSS here

中有关定位元素的更多信息

创建一个领英风格的个人资料栏

Create a profile bar with the style of linkedin

html

css

frontend

responsive-design

zurb-foundation