Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

css - 为什么文本节点默认呈现在其父级`::之前？

In lại Tác giả: Walker 123 更新时间：2023-11-28 11:03:50 29 4
mua khóa gpt4 Nike

在写关于 SO 的不同问题的答案时，我制作了这个片段:

@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');

/* relevant CSS */
div {
  vị trí: tương đối;
}

div::before {
  nội dung: '';
  vị trí: tuyệt đối;
  top: 0; left:0;
}
div>span {
  vị trí: tương đối;
  chỉ số z:0;
}

/* rest is just styling - should be irrelevant for the question */


div {
  font: normal normal normal 2rem/1 'Shadows Into Light', cursive;
  màu sắc: trắng;
  căn chỉnh văn bản:giữa;
  margin: 1rem;
  padding: 1rem;
  min-width: 15rem;
  con trỏ: con trỏ;
}
div::before {
  chiều rộng: 100%;
  chiều cao: 100%;
  độ mờ: 1;
  transition: opacity .3s cubic-bezier(.4,0,.2,1);
  background-color: #bada55;
  border-radius: .4rem;
}
div[orange]:before {
  background-color: #f50;
}
div:hover::before {
  opacity:.65;
}

thân hình {
  lề: 0; phần đệm: 0;
}
center-me-please {
  hiển thị: linh hoạt;
  hướng linh hoạt: cột;
  căn chỉnh các mục: giữa;
  biện minh-nội dung: trung tâm;
  min-height: 100vh;
  background: transparent url(http://lorempixel.com/g/1200/800/fashion) no-repeat 50% 50% /cover;
}

  
  
#bada55

  
not so #bada55

我很惊讶地注意到 ::trước 元素呈现在文本节点(橙色元素)上方，以防止它发生。我不得不将文本节点包装在 span 元素中，并给它一个非负的 chỉ số z 和一个非静态的 chức vụ (#bada55元素)。

在检查中，虽然 ::trước 元素具有默认(预期)值 chỉ số z (tự động)，但文本节点似乎根本没有(或者至少 Chrome 无法显示)。

到目前为止，我喜欢把自己想象成一个 chỉ số z 小忍者，这个想法在一定程度上得到了开发 this toy 的支持。帮助 friend 和同事更好地理解堆叠上下文原则和一般的 chỉ số z.

您可能已经猜到了，我正在寻找关于为什么 ::trước 默认情况下没有呈现在元素中其他所有内容下方的任何解释(它是第一个，因此在下方，对吗？)和有任何证据表明这是一个(已知的？)错误或有意(按设计？)行为。

我可能错过或误解的规范会很棒。

câu trả lời hay nhất

::trước mặc định在文本内容下方绘制 — 默认情况是 everything is non-positioned 时.

但是你的 ::trước 是绝对定位的。定位的盒子总是画在非定位的盒子前面。引用section 9.9.1 (强调我的):

Within each stacking context, the following layers are painted in back-to-front order:

  1. the background and borders of the element forming the stacking context.
  2. the child stacking contexts with negative stack levels (most negative first).
  3. the in-flow, non-inline-level, non-positioned descendants.
  4. the non-positioned floats.
  5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
  6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
  7. the child stacking contexts with positive stack levels (least positive first).

将您的文本内容包装在定位的 span 中会导致它按预期绘制在 ::trước 内容的前面，从那时起您在源代码顺序中有两个定位框.

关于css - 为什么文本节点默认呈现在其父级`::之前？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42171688/

29 4 0
Đề xuất bài viết: css - Visual Studio 2015 转到缺少 CSS 类的定义
Đề xuất bài viết: css - 有没有办法在修改某些属性的同时从父级继承 CSS 属性？
Đề xuất bài viết: ios - UIDocumentInteractionController 在不保存 Swift 的情况下使用来自 Web 的 URL 打开
Đề xuất bài viết: css - 在 ng-enter 动画期间出现不需要的滚动
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress