html渲染优先级

在前端开发中，优先布局是指在设计和构建页面时，将页面的各个部分按照其重要性和优先级进行排序，并依次进行布局和开发。这种方法可以帮助开发团队在项目初期就确定页面结构的核心部分，从而更好地掌控项目的整体进度和优先级。且确保在网络环境差的情况下，优先渲染重要内容

在CSS中，元素的渲染优先级是由元素的类型和CSS的特定规则决定的。可以看看我的这篇文章

一般来说，块级元素的渲染优先级高于行内元素，而行内元素的渲染优先级又高于浮动元素和定位元素。

HTML文档流：

HTML文档流是默认的页面元素排列方式，块级元素从上到下依次排列，而行内元素从左到右依次排列。这种排列方式遵循了普通的阅读顺序，即从上到下，从左到右。因此，文档流的渲染优先级相对较高。

浮动流（Floats）：

浮动元素的渲染优先级较低。当遇到具有浮动属性的元素时，浏览器会将其从正常的文档流中脱离出来，并按照设定的浮动方向移动。浮动元素后面的文档流会围绕浮动元素重新排列。因此，浮动流的渲染优先级相对较低。

定位流（Positioning）：

定位元素的渲染优先级也较低。当遇到具有定位属性的元素时，浏览器会将其从正常的文档流中脱离出来，并按照设定的位置进行放置。定位元素会覆盖文档流中的其他元素，可能会改变它们的排列顺序。因此，定位流的渲染优先级也相对较低。

static 元素默认，不脱离文档流

relative 不脱离文档流

特点

可以用在组件封装场景

当引用者为给组件设置大小时，组件内部使用定位可以根据自身内容大小自行适应展示，保证引用者样式正常按块级元素使用组件.。

  .luck-layout {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .luck-layout-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .luck-list-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

可以用在滚动播报场景

它的定位子元素受父元素管控，不论子元素的定位是什么，哪怕子元素的大小大过它自身，overflow: hidden/auto/scroll，会隐藏掉超出部分。

    :deep(.trend-music-game-broadcast) {
      width: 404rpx;
      height: 32rpx;
      line-height: 32rpx;
      position: absolute;
      top: 102rpx;
      left: 88rpx;
      overflow: hidden;

      .trend-music-game-broadcast-content {
        position: absolute;
        white-space: nowrap;
        word-break: break-all;
        padding-left: 100%;
        animation: wordsLoop var(--duration) linear 0s infinite;
        color: #FFFFFF;

        .broadcast-color {
          color: #ffd500;
        }
      }
    }

渲染时机和顺序：

• HTML文档流是默认的排列方式，按照HTML代码的顺序逐个加载和排列元素。
• 浮动流的元素会脱离文档流，根据设定的浮动方向移动，后面的文档流会重新排列。
• 定位流的元素会脱离文档流，根据设定的位置放置，可能会覆盖文档流中的其他元素。

需要注意的是，在具体的场景中，元素的渲染优先级可能会受到其他因素的影响，如CSS的选择器、样式表的顺序等。因此，在编写CSS时，需要综合考虑各种因素来确定元素的渲染优先级。