位置绝对混乱的 CSS Flexbox

发布于03月05日

我很困惑这是怎么回事有人能告诉我到底发生了什么吗？

body,
html {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100%;
}

.chat-break {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;

}

.chat-break .line {
  border-bottom: 1px solid #ddd;
  width: 100%;
}

.chat-break .date {
  color: #B5B5B5;
  position: absolute;
  background-color: #fff;
  padding-left: 8px;
  padding-right: 8px;
  
}

<div class="chat-break">
    <div class="line">
    </div>
    
    <p class="date">Today</p>
</div>

我的理解是:

.chat-break flexbox有两个元件.line和.date.
...但是在.date上使用position: absolute之后，它不再是flexbox中的元素了吗？
那为什么"今天"的主题是线？

推荐答案

前言:

top、right、bottom和left属性统称为"方框插入"属性.
Keep in mind that all CSS properties that aren't explicitly set will have default values that are either "initial" values or inherited values.
- 因此，除非另有明确规定，否则每个元素都有position: static;个.
- 他们元素的position和display属性中的The initial value for all of the box-inset properties is auto和regardless.
CSS有很多令人惊讶和违反直觉的行为.

Why `<div class="line">` fills the width of the page:

<div class="chat-break"> has display: flex;, which makes it a flex-parent.
- flex父元素的所有直接子元素(除了某些例外)都是flex-items，它们有position: static个.
- 因此，<div class="line">是一个灵活的项目.
- 因此<p class="date">是not，因为它有position: absolute;.
  - (一般来说)position: absolute;的元素是not subject to their layout-container's layout rules，用绝对坐标重新定位，原点在their-closet-ancestor-element-without-101(是的，这是一口).
因此，<div class="chat-break">是一个灵活的父母with only one flex-item，尽管有两个元素的子元素.
Also，因为<div class="chat-break">有display: flex;(而不是display: inline-flex)，这意味着<div class="chat-break">是block-level element，所以它填充其容器的宽度，即<body>，它填充视口的宽度.

Why `<p class="date">` is centered:

As <p class="date"> uses auto for all its box inset properties (i.e. top, right, etc) with position: absolute; then the computed value of those properties is the same as if <p class="date"> was position: static;.
- However, if <p class="date"> was position: static; then it would be a flex-item and would share its flex row with <div class="line"> - which would mean it would be located somewhere off to the right of the line (due to justify-content: center;).
  - 但它实际上是以中心为中心的，因为这是一个特例场景，是specifically specified in the specification...
    
    https://www.w3.org/TR/css-flexbox-1/#abspos-items
    
    4.1. 绝对定位的Flex children
    
    由于它不流动，flex容器的绝对定位子容器不会参与flex布局.
    
    假设flex容器is determined such that the child is positioned as if it were the sole flex item in the flex container的absolute位置的子容器和柔性容器都是固定大小的盒子，则static位置的子容器为flex容器is determined such that the child is positioned as if it were the sole flex item in the flex container.为此，自动利润率被视为零.