层模型--绝对定位(position:absolute)

Posted Rinpe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了层模型--绝对定位(position:absolute)相关的知识,希望对你有一定的参考价值。

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

效果如下:

技术分享

以上是关于层模型--绝对定位(position:absolute)的主要内容,如果未能解决你的问题,请参考以下文章

CSS层模型的应用

CSS层模型

HTML+CSS:css定位详解之相对定位绝对定位和固定定位

170412学习整理

布局模型

如何使用css让一个已知宽高的盒子垂直水平居中?