css定位
大前端 2017-03-02
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 0喜欢 / 0评论 2020-07-25
wallowyou 0喜欢 / 0评论 2020-06-28
nicepainkiller 0喜欢 / 0评论 2020-05-05
淡风wisdon大大 0喜欢 / 0评论 2020-04-21
lcyangcss 0喜欢 / 0评论 2019-12-23
maiktom 0喜欢 / 0评论 2019-12-07
somboy 0喜欢 / 0评论 2019-10-23
libowen0 0喜欢 / 0评论 2016-04-19
zhanghaibing00 0喜欢 / 0评论 2019-09-08
王景迁 0喜欢 / 0评论 2019-06-29
LadyZhong 0喜欢 / 0评论 2019-06-28
ajhongshaorou 0喜欢 / 0评论 2019-06-28
张大晴 0喜欢 / 0评论 2016-04-19
adeyi 0喜欢 / 0评论 2019-06-27
wolaizheli 0喜欢 / 0评论 2014-09-05
walliam 0喜欢 / 0评论 2014-07-31
kaiya0 0喜欢 / 0评论 2014-07-28
aaalk00 0喜欢 / 0评论 2013-10-11
startXUEBA 0喜欢 / 0评论 2013-09-18
lanzhusiyu 0喜欢 / 0评论 2013-09-09
张大晴 0喜欢 / 0评论 2013-07-16
JenniferMuMu 0喜欢 / 0评论 2013-01-12
王为仁 0喜欢 / 0评论 2012-11-09
CoderChang 0喜欢 / 0评论 2012-02-24
teresalxm 0喜欢 / 0评论 2011-02-24
覆雪蓝枫 0喜欢 / 0评论 2017-02-04
zuncle 0喜欢 / 0评论 2017-06-18
猫儿不熊 0喜欢 / 0评论 2016-05-10
haiyangzhibing 0喜欢 / 0评论 2016-06-07
88487901 0喜欢 / 0评论 2014-02-13
hitris 0喜欢 / 0评论 2010-08-31
Doulvme 0喜欢 / 0评论 2007-10-09
BAT 批处理程序 0喜欢 / 0评论 2017-05-24
软件设计 0喜欢 / 0评论 2017-05-16