css position属性为absolute时，其百分值的计算

haoguo 发布于2019-08-30 15:44 / 1883人阅读

摘要：当为时候，其相关属性的百分比是相对它参考的元素包含块来进行计算并进行位置渲染的。如果包含块的值会根据它的内容变化，而且包含块的属性的值被赋予或，那么，这些值的计算值为。

当position为absolue时候，其相关属性的百分比是相对它参考的元素（包含块）来进行计算并进行位置渲染的 。
首先我们必须知道：
1、[百分比的参照][1]：
根据包含块计算百分值 （1）元素的margin/padding/left/right/width参照包含块的width来计算；（2）要计算 height /top 及 bottom 中的百分值，是通过包含块的 height 的值。如果包含块的 height 值会根据它的内容变化，而且包含块的 position 属性的值被赋予 relative 或 static ，那么，这些值的计算值为 0。
2、[确定包含块][2]：
确定一个元素的包含块的过程完全依赖于这个元素的 position 属性：
（1）如果 position 属性为 static 或 relative ，包含块就是由它的最近的“祖先块元素”（比如说inline-block, block 或 list-item元素）或格式化上下文(比如说 a table container, flex container, grid container, or the block container itself)的内容区的边缘（content）组成的。
（2）如果 position 属性为 absolute ，包含块就是由它的最近的 position 的值不是 static （也就是值为fixed, absolute, relative 或 sticky）祖先元素的内边距区的边缘（padding-left + content + padding-right）组成。




    


    
        This is a paragraph!

GPU云服务器云服务器 position属性，css position:absolute position，css css属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116172.html

关于CSS一些细节问题

摘要：本文是年的最后一篇文章，主要是将一些细节问题整理一下。垂直百分比的值等于容器高度百分比值减去背景图片高度百分比值。如果两者同时存在时，只有起作用如果两者同时存在时，只有起作用。本文是2016年的最后一篇文章，主要是将一些CSS细节问题整理一下。 background-position取值为百分比的计算方式 margin相邻折叠问题 position的absolute和relativ...

yedf 2019-08-30 13:16 评论0 收藏0
我所了解的CSS包含块

摘要：根元素包含块根元素的包含块是一个矩形叫做初始化包含块。如果属性是的话，包含块就是由组成的。示例二代码在这里，这个标签为默认的且它的父标签的为，所以标签的包含块为标签，通过我们的判断规则一来确定。写在前面，本文将同步发布于Blog、掘金、segmentfault、知乎等处，如果本文对你有帮助，记得为我得到我的个人技术博客项目给个star哦。指出错误观念许多开发者认为一个元素的包含块...

BenCHou 2019-08-30 15:54 评论0 收藏0
CSS中的百分比

摘要：我们一般喜欢将宽度设置成百分比，但在将高度设置成百分比的时候要注意。解决方法利用函数让的宽度减去因为的百分比是参照其父元素的宽度计算的，因此这里将它的父元素的宽度减小，那么它的的自然就小了结论：标准流中的元素，看其属性有没有继承性。对于width和margin-left，它是可以继承的，它会参照父元素或者祖先元素（其实是包含块）；对于height，它没有继承性，父元素或者祖先元素...

LeoHsiun 2019-08-29 15:38 评论0 收藏0
CSS中的百分比

摘要：我们一般喜欢将宽度设置成百分比，但在将高度设置成百分比的时候要注意。解决方法利用函数让的宽度减去因为的百分比是参照其父元素的宽度计算的，因此这里将它的父元素的宽度减小，那么它的的自然就小了结论：标准流中的元素，看其属性有没有继承性。对于width和margin-left，它是可以继承的，它会参照父元素或者祖先元素（其实是包含块）；对于height，它没有继承性，父元素或者祖先元素...

CKJOKER 2019-08-26 12:00 评论0 收藏0
《css世界》- 详细重点笔记与技巧

摘要：概述在世界这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获以下是摘自每章内一些重要的概念与技巧。概述在《css世界》这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 line-h...

MasonEast 2019-08-02 12:03 评论0 收藏0