偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

一篇文章帶你了解Css z-index(重疊順序)

開發(fā) 前端
本文基于CSS基礎(chǔ),介紹了如何使用z-index重疊順序樣式,在實(shí)際DIV+CSS布局時(shí)候CSS需要絕對定位樣式,并且可以使用left、right進(jìn)行定位,通過不同z-index值實(shí)現(xiàn)層重疊順序排列。代碼很簡單,希望能夠幫助你學(xué)習(xí)。

[[360665]]

 div cssz-index層重疊順序

div層、span層等html標(biāo)簽層重疊順序樣式z-index,平時(shí)CSS使用較少,但也會難免會碰到CSS z-index使用。

從基礎(chǔ)語法到應(yīng)用案例教程講解學(xué)習(xí)z-index。

一、z-index語法與結(jié)構(gòu)

z-index 跟具體數(shù)字

  1. div{ 
  2.   z-index:100 

注意:z-index的數(shù)值不跟單位。

z-index的數(shù)字越高越靠前,并且值必須為整數(shù)和正數(shù)(正數(shù)的整數(shù))。

二、z-index使用條件

z-index在使用絕對定位 position:absolute屬性條件下使用才能使用。通常CSS讓不同的對象盒子以不同順序重疊排列,CSS就是要z-index樣式屬性。

三、案例

1. z-index重疊順序案例

為了方便觀察,設(shè)置3個(gè)DIV盒子,分別設(shè)置不同css背景顏色,設(shè)置相同CSS高度、CSS寬度。分別設(shè)置背景顏色)為黑色、紅色、藍(lán)色。CSS width為300px,css height為100px。

css代碼(沒加z-index屬性)

  1. <style> 
  2.             .div css5 { 
  3.                 position: relative
  4.             } 
  5.  
  6.             .div css5-1, 
  7.             .div css5-2, 
  8.             .div css5-3 { 
  9.                 width: 300px; 
  10.                 height: 100px; 
  11.                 position: absolute
  12.             } 
  13.  
  14.                 .divcss5-1 { 
  15.  
  16.                 background: #000;/* 黑色*/ 
  17.                 left: 10px; 
  18.                 top: 10px 
  19.             } 
  20.  
  21.             .divcss5-2 { 
  22.  
  23.                 background: #F00;/* 紅色*/ 
  24.                 left: 20px; 
  25.                 top: 20px 
  26.             } 
  27.  
  28.             .divcss5-3 { 
  29.  
  30.                 background: #00F;/* 藍(lán)色*/ 
  31.                 left: 30px; 
  32.                 top: 30px 
  33.             } 
  34. </style> 

CSS代碼(加上z-index屬性后) :

  1. <style> 
  2.             .div css5 { 
  3.                 position: relative
  4.             } 
  5.  
  6.             .div css5-1, 
  7.             .div css5-2, 
  8.             .div css5-3 { 
  9.                 width: 200px; 
  10.                 height: 100px; 
  11.                 position: absolute
  12.             } 
  13.  
  14.             .div css5-1 { 
  15.                 z-index: 10; 
  16.                 background: #000;/* 黑色*/ 
  17.                 left: 10px; 
  18.                 top: 10px 
  19.             } 
  20.  
  21.             .div css5-2 { 
  22.                 z-index: 20; 
  23.                 background: #F00;/* 紅色*/ 
  24.                 left: 20px; 
  25.                 top: 20px 
  26.             } 
  27.  
  28.             .div css5-3 { 
  29.                 z-index: 15; 
  30.               background: #00F;/* 藍(lán)色*/ 
  31.                 left: 30px; 
  32.                 top: 30px 
  33.             } 
  34. </style> 

html代碼

  1. <div class="divcss5-1"></div> 
  2. <div class="divcss5-2"></div> 
  3. <div class="divcss5-3"></div> 

 沒加的效果:


加上z-index屬性效果:


2. 案例說明

三個(gè)盒子均都使用了絕對定位屬性position樣式,并且設(shè)置相同的高度和寬度樣式。為了便于觀察CSS使用left、right屬性并賦予不同值,讓其錯(cuò)落有致。

  • Div css5-1 盒子背景為黑色, z-index:10
  • Div css5-2 盒子背景為紅色, z-index:20
  • Divcss5-3盒子背景為藍(lán)色 , z-index:15

為可以看見第一個(gè)盒子z-index:10,所以重疊在最下層,而第二個(gè)盒子z-index:20,值最大所以最上層重疊,第三個(gè)盒子設(shè)置z-index:15,居中。

四、總結(jié)

本文基于CSS基礎(chǔ),介紹了如何使用z-index重疊順序樣式,在實(shí)際DIV+CSS布局時(shí)候CSS需要絕對定位樣式,并且可以使用left、right進(jìn)行定位,通過不同z-index值實(shí)現(xiàn)層重疊順序排列。代碼很簡單,希望能夠幫助你學(xué)習(xí)。

 

責(zé)任編輯:姜華 來源: IT共享之家
相關(guān)推薦

2020-12-28 12:36:11

css重疊順序

2021-01-25 05:39:54

Css前端Border

2021-04-07 06:11:37

Css前端CSS定位知識

2021-05-31 09:30:36

Css前端CSS 特效

2020-11-03 19:18:28

CSS對齊文本

2021-06-30 00:20:12

Hangfire.NET平臺

2023-05-12 08:19:12

Netty程序框架

2020-11-17 11:10:21

CSS選擇器HTML

2020-11-10 10:48:10

JavaScript屬性對象

2021-01-29 18:41:16

JavaScript函數(shù)語法

2021-06-04 09:56:01

JavaScript 前端switch

2021-02-02 18:39:05

JavaScript

2023-05-08 08:21:15

JavaNIO編程

2021-09-27 09:18:30

ListIterato接口方法

2021-02-26 20:01:57

SVG濾鏡元素

2021-01-26 23:46:32

JavaScript數(shù)據(jù)結(jié)構(gòu)前端

2023-07-30 15:18:54

JavaScript屬性

2021-05-18 08:30:42

JavaScript 前端JavaScript時(shí)

2021-03-09 14:04:01

JavaScriptCookie數(shù)據(jù)

2024-04-19 14:23:52

SwitchJavaScript開發(fā)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號