06_01.相对定位relative

来源:互联网 发布:美的淘宝授权网店查询 编辑:程序博客网 时间:2024/05/04 16:41
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  <head>      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">      <title>Document</title>      <style type="text/css">      div{width: 500px;height: 100px;}      .box1{width: 100px;background: red; position: relative;top: 100px;left: 100px;}      .box2{background: green;}      .box3{background: blue;}      </style>  </head>  <body>      <!--positon:relative不改变文档流:box2、box3不因box1的定位而受影响→→即box1原来的位置保留。-->      <div class="box1">box1</div>      <div class="box2">box2</div>      <div class="box3">box3</div>  </body>  </html>  

0 0
原创粉丝点击