慕课网

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

如果想为元素设置层模型中的绝对定位，需要设置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象素。

效果图如下：

?不会了怎么办

是否输入像下面的代码：

position:absolute;
right:100px;
top:20px;

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

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

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

任务

写笔记

收藏课程后，能更快找到我哦～