css z-index属性怎么用

2024-01-17 17:15 小编
 cssz-index属性怎么用?
 
  z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
 
  语法:
 
  z-index:auto|number;
 
  参数:
 
  auto:默认。堆叠顺序与父元素相等。
 
  number:数值,设置元素的堆叠顺序;可以是正值,也可以是负值。
 
  说明:该属性设置一个定位元素沿z轴的位置,z轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
 
  注释:所有主流浏览器都支持z-index属性。任何的版本的InternetExplorer(包括IE8)都不支持属性值"inherit"。元素可拥有负的z-index属性值。Z-index仅能在定位元素上奏效(例如:position:absolute,position:relative,orposition:fixed)!
 
  cssz-index属性示例
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="UTF-8">
 
  <styletype="text/css">
 
  img{
 
  position:absolute;
 
  left:0px;
 
  top:0px;
 
  z-index:-1;
 
  }
 
  h2,p{
 
  background-color:white;
 
  border:1pxsolidred;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <h2>Thisisaheading</h2>
 
  <imgsrc="https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg"/>
 
  <p>由于图像的z-index是-1,因此它在文本的后面出现。</p>
 
  </body>
 
  </html>

image.png

Tag: 怎么
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码