整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
iv cssz-index層重疊順序
div層、span層等html標(biāo)簽層重疊順序樣式z-index，平時(shí)CSS使用較少，但也會(huì)難免會(huì)碰到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在使用絕對(duì)定位 position:absolute屬性條件下使用才能使用。通常CSS讓不同的對(duì)象盒子以不同順序重疊排列，CSS就是要z-index樣式屬性。
為了方便觀察，設(shè)置3個(gè)DIV盒子，分別設(shè)置不同css背景顏色，設(shè)置相同CSS高度、CSS寬度。分別設(shè)置背景顏色)為黑色、紅色、藍(lán)色。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;/* 藍(lán)色*/
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;/* 藍(lán)色*/
left: 30px;
top: 30px
}
</style>html代碼
<div class="divcss5-1"></div>
<div class="divcss5-2"></div>
<div class="divcss5-3"></div>沒加的效果:
加上z-index屬性效果：
三個(gè)盒子均都使用了絕對(duì)定位屬性position樣式，并且設(shè)置相同的高度和寬度樣式。為了便于觀察CSS使用left、right屬性并賦予不同值，讓其錯(cuò)落有致。
為可以看見第一個(gè)盒子z-index:10，所以重疊在最下層，而第二個(gè)盒子z-index:20，值最大所以最上層重疊，第三個(gè)盒子設(shè)置z-index:15，居中。
本文基于CSS基礎(chǔ)，介紹了如何使用z-index重疊順序樣式，在實(shí)際DIV+CSS布局時(shí)候CSS需要絕對(duì)定位樣式，并且可以使用left、right進(jìn)行定位，通過不同z-index值實(shí)現(xiàn)層重疊順序排列。代碼很簡(jiǎn)單，希望能夠幫助你學(xué)習(xí)。
個(gè)視頻我們來寫兩個(gè)圓環(huán)。這個(gè)圓環(huán)雖然看起來只是普普通通的兩個(gè)圓，但是認(rèn)真一看好像又沒那么簡(jiǎn)單，因?yàn)樗墙诲e(cuò)重疊起來的，并且還有一點(diǎn)陰影的效果，看起來比較真實(shí)。這個(gè)案例其實(shí)是UTube上面一個(gè)比較知名博主的教學(xué)案例，我們不妨來學(xué)習(xí)一下。
可能很多人也看過，我們今天主要來實(shí)現(xiàn)這兩個(gè)圓環(huán)重疊的部分，陰影的部分比較簡(jiǎn)單，大家可以自己去思考一下。html里面這兩個(gè)div就是這兩個(gè)圓環(huán)，樣式現(xiàn)在寫了一些基本的樣式，其它樣式重新來寫。
·先來把這兩個(gè)圓環(huán)的基礎(chǔ)樣式寫出來，兩個(gè)圓有了，然后把其中一個(gè)變成紅色，再讓它們先簡(jiǎn)單的重疊一下，控制一下第二個(gè)圓環(huán)，調(diào)整一下它的邊框顏色就可以了，把它變成紅色。
·再往左邊移動(dòng)60像素，先簡(jiǎn)單重疊起來。現(xiàn)在兩個(gè)圓只是簡(jiǎn)單的重疊，我們要怎么樣實(shí)現(xiàn)這種交錯(cuò)重疊？就好像兩個(gè)圓環(huán)是穿起來的這種感覺。這里分別給這兩個(gè)圓環(huán)加個(gè)偽元素，我們是可以通過定位把一個(gè)盒子撐起來的。
·這里給它設(shè)置一下inset，關(guān)鍵就是inset設(shè)置為多少合適。如果是設(shè)置為0，也就是四個(gè)方向都是設(shè)為0，按道理應(yīng)該是和父元素完全重疊的(沒border的話)。
·加個(gè)邊框看一下，很明顯它并沒有和白色圓環(huán)完全重疊，而是在它里面。這是因?yàn)槲覀兛吹降倪@兩個(gè)圓環(huán)，看到的只是border邊框的區(qū)域。inset的設(shè)置為0，它只不過是貼在content內(nèi)容區(qū)域里面，所以偽元素我們要把它擴(kuò)大才可以。
·這里要調(diào)整一下inset的值，0是剛好貼滿content的區(qū)域，設(shè)置為正值它是收縮的，所以這里設(shè)置為-25px。現(xiàn)在和白色的圓環(huán)就一樣大了，只不過一個(gè)正方形一個(gè)圓形，等一下把偽元素調(diào)整成圓的就可以了。
·然后單獨(dú)來設(shè)置一下上邊框，同樣也是白色的邊框，還有右邊框也單獨(dú)設(shè)置一下。ok，再把另外兩條邊框設(shè)置為透明。現(xiàn)在左邊和下邊就看不到了，再把它設(shè)置成一個(gè)圓，這樣它就可以和第一個(gè)圓環(huán)完全重疊起來了。
·現(xiàn)在偽元素這半個(gè)圓環(huán)就和本來的圓環(huán)完全重疊起來，那有什么用？還是和原來的一樣，但是現(xiàn)在就可以單獨(dú)給偽元素這半個(gè)圓環(huán)設(shè)置層級(jí)了，把層級(jí)調(diào)高一點(diǎn)，這樣這一段圓環(huán)它就可以蓋在上面，然后再給它旋轉(zhuǎn)一下位置，讓它旋轉(zhuǎn)負(fù)的四十五度，這樣兩個(gè)圓環(huán)貫穿重疊起來的效果就完成了。
其實(shí)就是借助了一個(gè)偽元素做了一個(gè)障眼法，如果想實(shí)現(xiàn)圓環(huán)交匯的地方有點(diǎn)陰影的效果，也可以多寫兩個(gè)偽元素來實(shí)現(xiàn)，這個(gè)大家可以自己來思考一下。
這個(gè)視頻就到這里，感謝大家的收看。
chart 多圖同一Div 渲染重疊的問題，實(shí)驗(yàn)下來，最有效的一個(gè)方法就是這個(gè)，在初始化之前，加一句 removeAttr。。, 其他方法如.clear, .dispose， .setOption({},true) 均失敗。。。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
