<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> <style type="text/css"> .con{ width: 500px; border: 1px solid #000; } .con div{ width: 200px; height: 200px; position: absolute; } .box1{ background-color: gold; left:20px; top:20px; z-index:11; } .box2{ background-color: cyan; left:40px; top:40px; z-index:22; } .box3{ background-color: lime; left:60px; top:60px; z-index:1; } .box4{ background-color: plum; left:80px; top:80px; z-index:3; } .box5{ background-color: yellow; left:100px; top:100px; background: url(images/telephone.jpg) 10px 10px no-repeat; /* 图片局部定位,可以通过浏览器的检查元素,更改上面的两个值,用上下键或者pgUPpgDOWN控制找到最合适的位置 */ } /* 在定位中 相对定位relative(adj.相对的;n.亲戚) 是相对元素自己原本的位置来定位的; !在使用相对定位的时候,元素原本的位置===>依旧存在. 绝对定位absolute(adj.绝对的) 是相对与父集来定位.如果父集没有定位属性的话,就继续追溯,直到body. !在使用绝对定位的时候,元素原本的位置===>不再存在. 固定定位fixed(v.固定的,确定的,维修;n.困境) 是相对整个浏览器屏幕来进行定位的.所以不管父集或者设置没有设置定位属性,都以整个屏幕作为定位属性. !和绝对属性相同,在使用固定定位的时候,元素原本的位置===>不再存在. */ /* z-index中 数字代表级别 默认级别无. 设置级别后,级别越大,元素越靠上. 同级别元素,后来者居上. */ </style> </head> <body> <!-- div.con>div.box${$}*5 --> <div class="con"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box5">5</div> </div> </body> </html>