css中absolute定位原理

position的四个值:static、relative、absolute、fixed。

绝对定位:absolute和fixed统称为绝对定位

相对定位:relative

默认值:static

绝对定位的定位原理:

1.在父元素没有设置相对定位或绝对定位的时候,元素相对于根元素html元素进行绝对定位。

这里我们设置3个div,第3个div设置为绝对定位。并设置偏移量

运行结果:

由运行结果,可以看出div3悬浮在页面上。左侧偏移量为100px,顶部偏移量为30px。这里div3的父元素body没有设置相对定位或者绝对定位,所以此时div3是根据根元素html来定位的。

2.父元素设置了相对定位或绝对定位,元素会相对于离自己最近的设置相对定位或绝对定位的父元素进行定位。这里离自己最近的父元素

定位不是默认的static。

此时我们设置div3的父元素body为绝对定位

运行结果:

为了进一步理解第2句话,我们来设置这3个div分别设置父元素。

Html代码如下:

运行结果为

div3会按照与他最近的父元素container2进行绝对定位。

注意:

子元素是绝对定位,父元素就要设置为相对定位(子绝父相)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • 在CSS中关于定位的内容是:position:relative | absolute | static | fix...
    feelinghappy618阅读 662评论 0 0
  • 学习建议 定位、浮动是 CSS 核心知识点,必须熟练掌握。 1.文档流的概念指什么?有哪种方式可以让元素脱离文档流...
    饥人谷_任磊阅读 1,126评论 0 3
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 980评论 0 1
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 917评论 0 4