一、定位属性介绍
①属性名称:position
②三种方式:
1>static ,默认定位方式
2>relative,相对定位,相对于原来的位置,但是原来的位置仍然保留
3>absolute,绝对定位,相对于最近的非标准定位,原来的位置消失,被后面的位置顶替
③判断你是否熟练掌握的练习
先局部在整体练习
④实例说明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div{ width:50px; height:50px; } #div1{ background: red; float: left; } #div2{ background: orange; float: left; } #div3{ background: blue; clear: both; position: relative; left: 50px; } #div4{ background: violet; position: relative; left: 50px; } </style> <body> <div id="div1">我是div1</div> <div id="div2">我是div2</div> <div id="div3">我是div3</div> <div id="div4">我是div4</div> </body> </html>效果图: