css定位
css定位及z-index的使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css定位</title>
<style>
/*z-index数越大越靠顶层，数越小越靠底层*/
#div1{
width:200px;
height:200px;
background: rebeccapurple;
position:absolute;
top:20px;
z-index: 2;
}
#div2{
width:200px;
height:200px;
background:black;
position:relative;
left:20px;
z-index: 1;
}
#div3{
width:200px;
height:200px;
background:darkred;
position:relative;
left:30px;
top: -80px;
z-index: 0;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script>
<!--显示从1到99上下排列-->
for( var i=0;i<100;i++){
document.write(i+"<br/>")
}
</script>
</body>
</html> z-index可取负值，负值越大表示越靠底层:
<html>
<head>
<style type="text/css">
body{
color:red;
}
img
{
position:absolute;
top:0;
left:0;
z-index: -1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="../../image/1.gif" />
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html> 相关推荐
teresalxm 2020-07-25
wallowyou 2020-06-28
nicepainkiller 2020-05-05
淡风wisdon大大 2020-04-21
lcyangcss 2019-12-23
maiktom 2019-12-07
somboy 2019-10-23
libowen0 2016-04-19
zhanghaibing00 2019-09-08
王景迁 2019-06-29
ajhongshaorou 2019-06-28
张大晴 2016-04-19
adeyi 2019-06-27
wolaizheli 2014-09-05
walliam 2014-07-31