絕對定位的 Flex 兒童

http://jsbin.com/fadufow/66/edit?html,css,output

flex 容器若設定為 relative, 則 position: absolute 子元素會對應到 flex "內容物所在的空間",flex 若有捲軸會跟著內容移動.....

沒有設定則會對應容器外框, 但若加上定位位值,e.g. top,則會對應到 screen..........

所以還是框架是框架內容是內容比較好

4.1。絕對定位的Flex兒童

4.1. Absolutely-Positioned Flex Children

As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout. 因為它是非流體,在 Flex 容器, 一個絕對定位的子元素的不參與 flex 佈局。

The static position of an absolutely-positioned child of a flex container is determined such that the child is positioned as if it were the sole flex item in the flex container, assuming both the child and the flex container were fixed-size boxes of their used size. 一個 flex 容器中,"絕對定位的子元素"的"靜態位置",是如此被決定: 彷彿這個子元素,是 flex 容器中"唯一的 flex 項目"般被定位。 假設子元素和容器,都是如他們的大小、固定的尺寸的盒子。

For this purpose, a value of align-self: auto is treated identically to start. 為了此目的,align-self :auto 將以 start 的方式對待處理。

In other words, the static-position rectangle of an absolutely-positioned child of a flex container is the flex container’s content box, 換句話說,flex 容器中,絕對定位子元素的靜態位置矩形,是 flex 容器的内容"框",

where the static-position rectangle is the alignment container used to determine the static-position offsets of an absolutely-positioned box. 静态位置矩形所在是对齐的容器、用来确定一個绝对定位的盒子的静态位置偏移量。

(In block layout the static position rectangle corresponds to the position of the “hypothetical box” described CSS2.1 always uses a block-start inline-start alignment of the absolutely-positioned box within the static-position rectangle. Note that this definition will eventually move to the CSS Positioning module.) (在 block layout,靜態位置的矩形對應到一個"假想盒"描述的位置, CSS2.1 總是使用一個 block-start inline-start 對齊在靜態位置矩形內絕對定位的盒子。注意這個定義將最終移動到 CSS 定位模塊。)

in CSS2.1§10.3.7. Since it has no alignment properties, The effect of this is that if you set, for example, align-content: center; on an absolutely-positioned child of a flex container, 在 CSS2.1§10.3.7. 由於它沒有 alignment 屬性, 這樣做的效果是,如果你設置,例如:align-content:center; 在 Flex 容器的絕對定位的子元素身上,

auto offsets on the child will center it in the flex container’s cross axis. However, since the absolutely-positioned box is considered to be “fixed-size”, a value of stretch is treated the same as flex-start. 子元素會自動偏移,置中在一個 flex 容器的橫軸。 然而,由於絕對定位的框被認為是“固定大小”,所以 stretch 的值被視為與 flex-start 相同。

其實我不知道我看了什麼...

results for ""

    No results matching ""