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;
}
最佳答案
您创建的新行被前一行隐藏,因为行内元素的 position
,特别是 .coverPic
元素,设置为 绝对
。
解决方案
像这样更改 .coverPic
元素的位置:
.coverPic {
z-index: 1;
position: relative;
height: 138px;
width:100vw;
}
更新 fiddle :https://jsfiddle.net/yxsc3cqy/1/
阅读更多关于在 CSS 中定位元素的信息 here
关于html - 创建一个领英风格的个人资料栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44051112/