css里的positioning scheme, 即position property

简介: css里的positioning scheme, 即position property

在 SAP Spartacus 的scss文件实现里,能观察到很多position property具有不同的值:absolute 或者 relative:


image.pngimage.png

position属性的初始值为static.


首先需要了解css里的三种positioning scheme.


In CSS 2.1, a box may be laid out according to three positioning schemes.


Normal flow : In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.


Floats : In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.


Absolute positioning : In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.


normal flow

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.


normal flow里的boxes属于某一种格式化上下文,block或者inline仅居其一,但是不能同时属于二者。


相关文章
|
2月前
|
前端开发 容器
CSS语言的属性(Property)和值(Value)
CSS语言的属性(Property)和值(Value)
|
3月前
|
前端开发
CSS position 小结
CSS position 小结
15 0
|
7月前
|
前端开发 容器
|
9月前
|
前端开发 容器
【CSS】定位属性position使用详解(static、relative、fixed、absolute)
css定位属性position:static、relative、fixed、absolute详细介绍及使用样例。
|
前端开发
web前端-CSS(display,position,overflow和浮动float)
web前端-CSS(display,position,overflow和浮动float)
111 0
|
前端开发 Linux 程序员
「CSS」知识点笔记:position
「CSS」知识点笔记:position
83 0
「CSS」知识点笔记:position
|
前端开发
CSS Position(定位)
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 除非专门指定,否则所有框都在普通流中定位。 也就是说,普通流中的元素的位置由元素在 HTML 中的位置决定。
133 0
CSS Position(定位)
|
前端开发
CSS3之position:sticky使用
CSS3之position:sticky使用
236 0
|
前端开发 开发者 容器
CSS position | 学习笔记
快速学习CSS position
81 0
CSS position | 学习笔记
|
编解码 前端开发 JavaScript
Canvas+HTML+CSS+Position定位
Canvas+HTML+CSS+Position定位
Canvas+HTML+CSS+Position定位