整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
iv cssz-index層重疊順序
div層、span層等html標(biāo)簽層重疊順序樣式z-index，平時CSS使用較少，但也會難免會碰到CSS z-index使用。
從基礎(chǔ)語法到應(yīng)用案例教程講解學(xué)習(xí)z-index。
z-index 跟具體數(shù)字
div{
z-index:100
}注意：z-index的數(shù)值不跟單位。
z-index的數(shù)字越高越靠前，并且值必須為整數(shù)和正數(shù)（正數(shù)的整數(shù)）。
z-index在使用絕對定位 position:absolute屬性條件下使用才能使用。通常CSS讓不同的對象盒子以不同順序重疊排列，CSS就是要z-index樣式屬性。
為了方便觀察，設(shè)置3個DIV盒子，分別設(shè)置不同css背景顏色，設(shè)置相同CSS高度、CSS寬度。分別設(shè)置背景顏色)為黑色、紅色、藍色。CSS width為300px，css height為100px。
css代碼（沒加z-index屬性）
<style>
.div css5 {
position: relative;
}
.div css5-1,
.div css5-2,
.div css5-3 {
width: 300px;
height: 100px;
position: absolute;
}
.divcss5-1 {
background: #000;/* 黑色*/
left: 10px;
top: 10px
}
.divcss5-2 {
background: #F00;/* 紅色*/
left: 20px;
top: 20px
}
.divcss5-3 {
background: #00F;/* 藍色*/
left: 30px;
top: 30px
}
</style>CSS代碼(加上z-index屬性后) :
<style>
.div css5 {
position: relative;
}
.div css5-1,
.div css5-2,
.div css5-3 {
width: 200px;
height: 100px;
position: absolute;
}
.div css5-1 {
z-index: 10;
background: #000;/* 黑色*/
left: 10px;
top: 10px
}
.div css5-2 {
z-index: 20;
background: #F00;/* 紅色*/
left: 20px;
top: 20px
}
.div css5-3 {
z-index: 15;
background: #00F;/* 藍色*/
left: 30px;
top: 30px
}
</style>html代碼
<div class="divcss5-1"></div>
<div class="divcss5-2"></div>
<div class="divcss5-3"></div>沒加的效果:
加上z-index屬性效果：
三個盒子均都使用了絕對定位屬性position樣式，并且設(shè)置相同的高度和寬度樣式。為了便于觀察CSS使用left、right屬性并賦予不同值，讓其錯落有致。
為可以看見第一個盒子z-index:10，所以重疊在最下層，而第二個盒子z-index:20，值最大所以最上層重疊，第三個盒子設(shè)置z-index:15，居中。
本文基于CSS基礎(chǔ)，介紹了如何使用z-index重疊順序樣式，在實際DIV+CSS布局時候CSS需要絕對定位樣式，并且可以使用left、right進行定位，通過不同z-index值實現(xiàn)層重疊順序排列。代碼很簡單，希望能夠幫助你學(xué)習(xí)。
果你設(shè)置了兩個相鄰的 div 的 margin 為 8px ，但實際顯示的間距只有 8px 而不是預(yù)期的 16px ，這可能是因為 CSS 中的外邊距重疊（margin collapsing）導(dǎo)致的。
外邊距重疊是指當(dāng)兩個垂直相鄰的塊級元素具有相鄰的外邊距時，它們的外邊距會合并為一個外邊距，取其中的最大值作為最終的外邊距值。這可能會導(dǎo)致你看到的實際間距小于預(yù)期值。
為了避免外邊距重疊，你可以嘗試以下方法：
給其中一個 div 添加內(nèi)邊距（padding）： 可以給其中一個 div 添加內(nèi)邊距，而不是使用外邊距來實現(xiàn)間距的效果。這樣就不會發(fā)生外邊距重疊。
使用空的塊級元素來間隔： 可以在兩個 div 之間添加一個空的塊級元素（例如 <div></div> ），并給這個元素設(shè)置期望的外邊距。這樣可以避免外邊距重疊問題。
使用 flex 布局或者絕對定位： 可以考慮使用 flex 布局或者絕對定位來控制元素之間的間距，這樣可以避免外邊距重疊問題。
下面是一個使用空的塊級元素來間隔的示例代碼：
<div class="container">
<div class="box"></div>
<div class="spacer"></div>
<div class="box"></div>
</div>
.container {
display: flex;
}
.box {
width: 50px;
height: 50px;
background-color: lightblue;
margin: 8px;
}
.spacer {
flex: 1;
}
通過以上方法，你應(yīng)該可以避免外邊距重疊，實現(xiàn)兩個 div 之間的間距為 16px 的效果。
ss中元素的定位
復(fù)雜的網(wǎng)頁布局都是通過各種網(wǎng)頁元素靈活定位實現(xiàn)的，網(wǎng)頁中的各種元素定位都有自己的特點。今天為大家聊一下css中常用的三種定位方法。這里說的定位不是table排版的，而是通過DIV+CSS的方法對頁面中的塊元素的定位。
float定位
float定位是css排版非常重要的手段，新手一定要多多練習(xí)熟練掌握。float定位屬性值有三種left、right和默認(rèn)值none。設(shè)置了元素向左（left）或者向右（right）浮動時，元素會向父元素的坐車或者右側(cè)靠近。可以靈活運用浮動實現(xiàn)復(fù)雜的排版效果比如說“文字環(huán)繞”和“八仙過海”。另外可以使用clear:both屬性消除上面對下面的排版影響。下圖是一段簡單的CSS+DIV代碼，A是B、C和D的父元素，B元素使用了左float定位，C元素使用了有float定位，D元素使用了clear:both清除浮動影響。
position定位
position定位于float一樣，也是css排版中經(jīng)常用到的，從字面上理解就是指定塊元素的位置，它是相對于父元素的位置和相對其他自身應(yīng)該在的位置。position有static、absolute、inherit、relative和fixed五個值。static是默認(rèn)值，它表示元素保持在原來的位置上，沒有任何移動效果。absolute：它表示元素生成絕對定位，可以設(shè)置top、right、bottom、left四個值來調(diào)整元素的位置。relative：它表示生成相對定位的元素，相對于其正常位置進行定位。fixed：它表示生成絕對定位的元素，相對于瀏覽器窗口進行定位，也可以設(shè)置top、right、bottom、left四個值來調(diào)整元素的位置。inherit：規(guī)定從父元素繼承 position 屬性的值。需要注意的是IE瀏覽器不支持position定位的inherit屬性。下圖是一段簡單的absolute定位代碼。
z-index空間位置
z-index屬性用于調(diào)整定位是重疊快的上下位置，你可以想象為x-y軸，垂直于頁面為z軸，z-index值越大他的位置就越往上。z-index值為整數(shù)，可以是負(fù)數(shù)，元素設(shè)置了position出現(xiàn)重疊時，為了保證排班效果，需要設(shè)置它們的z-index屬性值。默認(rèn)的z-index屬性值是0，兩個元素z-index都一樣將保持原來的空間位置不變。
關(guān)于css中的元素定位到這，如果你是大神可以忽略這篇文章，每天學(xué)習(xí)一個知識點，每日寄語-“成功源于不懈的努力。”
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
