html - Flexbox、z-index 和位置 : static: Why isn't it working?-6ren

html - Flexbox、z-index 和位置 : static: Why isn't it working?

转载作者：技术小花猫更新时间：2023-10-29 12:32:19

25

4

根据 flexbox 规范:

..4.3. Flex Item Z-Ordering ,... and z-index values other than auto create a stacking context even if position is static.

所以，我认为 z-index/opacity 应该像往常一样与 flexbox 一起工作，但是当我将它应用到这个 HTML/CSS 时它不起作用(我的目标是将 .header 放在 .core 之上，创建两层):

 .header {
   opacity: 0.5;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }
 .headerLeft {
   z-index: inherit;
   background-color: blue;
   text-align: right;
   align-self: stretch;
   flex: 2 1 250px;
 }
 .headerCenter {
   z-index: inherit;
   background-color: red;
   text-align: right;
   align-self: stretch;
   flex: 1 1 175px;
 }
 .headerRight {
   z-index: inherit;
   background-color: green;
   text-align: right;
   align-self: stretch;
   flex: 1 1 100px;
 }
 .core {
   z-index: 0;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   justify-content: space-around;
 }
 .coreItem {
   align-self: stretch;
   flex: 1 1 400px;
 }

<body>
  <div class="header">
    <div class="headerLeft">Left</div>
    <div class="headerCenter">Center</div>
    <div class="headerRight">Right</div>
  </div>
  <div class="core">
    <div class="coreItem">Core1</div>
    <div class="coreItem">Core2</div>
    <div class="coreItem">Core3</div>
    <div class="coreItem">Core4</div>
    <div class="coreItem">Core5</div>
    <div class="coreItem">Core6</div>
  </div>
</body>

我在 flex 属性上使用了适当的前缀。我不明白为什么它不起作用。

最佳答案

就像您在问题中所写的那样，元素不需要需要为 z-index 定位才能在 flex 容器中工作。

即使使用 position: static，Flex 元素也可以参与 z-index 堆叠顺序，这对于其他 CSS 盒模型(Grid 除外)是不正确的，其中 z-index 仅适用于定位元素。

4.3. Flex Item Z-Ordering

Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

z-index 在您的代码中不起作用的原因是 div.header 和 div.core 不是 flex 元素。它们是 body 的子级，但 body 不是 flex 容器。

为了让 z-index 在这里工作，您需要将 display: flex 应用到 body。

将此添加到您的代码中:

body {
    display: flex;
    flex-direction: column;
}

Revised Demo

关于html - Flexbox、z-index 和位置 : static: Why isn't it working?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33391370/

25

4

0

文章推荐： html - 如何将html代码与css代码分开

文章推荐： html - 两列，隐藏一列时，另一列展开全宽

文章推荐： javascript - 屏幕调整大小后谷歌地图显示？

c# - 无法从 Func 转换为 Func
我对这个错误很困惑: Cannot implicitly convert type 'System.Func [c:\Program Files (x86)\Reference Assemblies\
rust - 所有 T、&T、&mut T、[T]、&[T]、*mut T 的通用实现
考虑这段代码: pub trait Hello { fn hello(&self); } impl Hello for Any { fn hello(&self) {
c++ - "T t = {};"和 "T t{};"可以产生不同的结果吗？
问题很简单。是否可以构造这样一个类型 T，对于它下面的两个变量声明会产生不同的结果？ T t1 = {}; T t2{}; 我已经研究 cppreference 和标准一个多小时了，我了解以下内容:
java - Comparator中的compare(T,T)不能应用于(T,T)
Intellij idea 给我这个错误:“Compare (T, T) in Comparator cannot be applied to (T, T)” 对于以下代码: public class
php -\n\t\t\t\t\在php中的含义和用途是什么
任何人都可以告诉我 : n\t\t\t\t\n\t\t\t 在以下来自和 dwr 服务的响应中的含义和用途是什么. \r\n\t\t\t \r\n\t\t\t
c++ - "T a"、 "T a()"和 "T a=T()"之间有什么区别，其中 T 是一个类？
让 T 成为一个 C++ 类。下面三个指令在行为上有什么区别吗？ T a; T a(); T a = T(); T 为不带参数的构造函数提供了显式定义这一事实是否对问题有任何改变？后续问题:如果
Rust中的智能指针:BoxRcArcCellRefCellWeak
Rust中的智能指针是什么智能指针（smart pointers）是一类数据结构，是拥有数据所有权和额外功能的指针。是指针的进一步发展指针（pointer）是一个包含内存地
c++ - 交替排序数组的最简单方法是什么(例如 :T, T,F,F,F,T,F,T,F,F,F 到 T,F,T,F,T,F,T,F,T,T ,T)?
比如我有一个 vector vector > v={{true,1},{true,2},{false,3},{false,4},{false,5},{true,6},{false,7},{true,8
Python 3 Pandas - 带有额外\n\t\t\t\t\t 的列
我有一个来自 .xls 电子表格的数据框，我打印了 print(df.columns.values) 列，输出包含一个名为:Poll Responses\n\t\t\t\t\t。我查看了 Excel
java - 为什么Stream.reduce采用BinaryOperator 而不是BiFunction ？
This question already has answers here: What are good reasons for choosing invariance in an API like
rust - &T 和 T/&, ~T 和 T/~ 的区别
指针类型作为类型前缀与在类型前加斜杠作为后缀有什么区别。斜线到底是什么意思？最佳答案语法 T/~ 和 T/& 基本上已被弃用(我什至不确定编译器是否仍然接受它)。在向新向量方案过渡的初始阶段，[T
c++ - 如何从 T、T& 或 T* 模板参数中获取 T*
我正在尝试找到一种方法来获取模板参数的基类。考虑以下类: template class Foo { public: Foo(){}; ~Foo(){};
c++ - 当 T 声明为 T::T(T&) 时，std::is_trivially_constructible::value 的结果不正确
这是一个让我感到困惑的小问题。我不知道如何描述它，所以只看下面的代码: struct B { B() {} B(B&) { std::cout ::value #include
c++ - T::T(T&)有什么用？
为什么有 T::T(T&) 而 T::T(const T&) 更适合 copy ？ (大概是用来实现move语义的？？？) 原始描述(被melpomene证明是错误的): 在C++11中，支持了一种新
java - 类型参数 T 使用 Eclipse 在 T[] toArray(T[] a) 中隐藏类型 T
在 Java 7 中使用 eclipse 4.2 并尝试实现 List 接口(interface)的以下方法时，我收到了警告。 public T[] toArray(T[] a) { ret
foo[T](T,T) : T 的 Scala 类型扩展/推断
假设有三个函数: def foo[T](a:T, b:T): T = a def test1 = foo(1, "2") def test2 = foo(List(), ListBuffer()) 虽
generics - 通用类型统一 : multiple parameters (T, T) 与多个参数列表 (T)(T)？
我对柯里化(Currying)和非柯里化(Currying)泛型函数之间类型检查的差异有点困惑: scala> def x[T](a: T, b: T) = (a == b) x: [T](a: T,
c++ - 转发引用 : returning T when given T&& and T& when given T&
考虑一个类A，我如何编写一个具有与相同行为的模板 A& pretty(A& x) { /* make x pretty */ return x; } A pretty(A&& x) {
java - 为什么在 T 是类型参数而 t 是变量的情况下不允许使用 "t instanceof T"？
Eclipse 表示由于泛型类型橡皮擦，类型参数不允许使用 instanceof 操作。我同意在运行时不会保留任何类型信息。但是请考虑以下类的通用声明: class SomeClass{ T
c++ - T t {x} 和 T t = { x } 对于整数或枚举类型的区别？
在 C++14 中: 对于任何整数或枚举类型 T 以及对于任何表达式 expr: 有没有区别: struct S { T t { expr }; }; 和 struct S { T t = { exp

首页

博学

6Ren·AI

商城

html - Flexbox、z-index 和位置 : static: Why isn't it working?