CSS——相对定位

定位

1.相对定位
2.绝对定位
3.z-index

相对定位

代码图

效果图

小结

相对定位：position:relative;
相对于原来的位置，进行指定的偏移

top:-20px; left:20px; bottom:-10px; right:20px;

方块定位练习

代码
#box{ width:300px; height:300px; padding:10px; border:2px solid gray; } a{ width:100px; height:100px; text-decoration:none; background:#ffa1f2; line-height:100px; text-align:center; color:white; display:block; } a:hover{ background:lightblue; } .a2{ position:relative; top:-100px; left:200px; } .a4{ position:relative; top:-100px; left:200px; } .a5{ position:relative; top:-300px; left:100px; }

效果图