[英]How to overlap divs using CSS?
我所擁有的是一個用戶配置文件容器,其中包含一個頭部,一個主體(具有兩個內部主體部分)和一個包含照片的頁腳。
我正在尋找一種使div重疊的方法,因此左側的第一個div將被固定,而每個下一個div都將與上一個div重疊,如下所示:
我這里有
的HTML
<div class="userContainer">
<div class="userHead">
Head
</div>
<div class="userBody">
<div class="userBody1">
Body 1
</div>
<div class="userBody2">
Body 2
</div>
<div class="userImage">
<img src="https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg">
</div>
</div>
</div>
<div class="userContainer">
<div class="userHead">
Head
</div>
<div class="userBody">
<div class="userBody1">
Body 1
</div>
<div class="userBody2">
Body 2
</div>
<div class="userImage">
<img src="https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg">
</div>
</div>
</div>
的CSS
.userContainer {
position: relative;
float: left;
margin-right: 20px;
color: white;
height:100px !important;
}
.userHead {
background-color: #f05624;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
color: white;
border-radius: 200px;
margin-left: 20px;
font-weight: 400;
}
.userBody {
width: 75px;
position: absolute;
top: 30px;
left: 3px;
border-top-right-radius: 150px;
border-top-left-radius: 150px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
font-weight: 400;
text-align: center;
}
.userBody1 {
height: 25%;
border-top-right-radius: 150px;
border-top-left-radius: 150px;
background-color: #f05624;
padding-top: 10px;
}
.userBody2 {
height: 15%;
background-color: #f05624;
font-size: 10px !important;
}
.userImage img{
height: 100%;
width: 100%;
}
檢查jsfiddle
有什么建議么?
添加另一行css,以明確方式將第一個容器的左邊距設置為0 px。
.userContainer:nth-child(1){
margin-left:0px;
}
將其他容器邊距設置為margin-left -20px
.userContainer {
position: relative;
float: left;
margin-right: 20px;
color: white;
height:100px !important;
margin-left:-30px;
}
這是一個例子:
https://jsfiddle.net/edqpyvs1/2/
添加此JS代碼,以確保該容器具有比下一個容器更大的z-index等。
var containers = document.getElementsByClassName("userContainer");
var zindexvalue = 1000;
for(index = containers.length - 1 ; index >= 0; index--){
var container = containers[index];
container.style.zIndex = zindexvalue;
zindexvalue = zindexvalue + 1;
}
您可以將div2嵌套在div1中:
<div id="div1">
<img src="\img1.png" />
<div id="div2">
<img src="\img1.png" />
</div>
</div>
這是使用z-index的解決方案: https : //jsfiddle.net/edqpyvs1/1/
.userContainer {
position: relative;
float: left;
margin-right: 20px;
color: white;
height:100px !important;
z-index: 100;
}
.userContainer + .userContainer{
z-index: 99;
left: -50px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.