13-6 万事无绝对 -层模型之绝对定位
本节编程练习不计算学习进度，请电脑登录imooc.com操作

万事无绝对 -层模型之绝对定位

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

效果如下：

任务

我来试一试:设置div标签相对于浏览器，（相对于以前位置右上角）向左移动100象素，向下移动20象素。

效果图如下：

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>absolute样式</title>
  7.     <style type="text/css">
  8.     div {
  9.         width: 200px;
  10.         height: 200px;
  11.         border: 2px red solid;
  12.  
  13.  
  14.  
  15.     }
  16.     </style>
  17. </head>
  18.  
  19. <body>
  20.     <div id="div1"></div>
  21. </body>
  22.  
  23. </html>
下一节