关于布局

关于布局需要注意的

1. 失效的 position:fixed

在许多情况下,position:fixed 将会失效。MDN 用一句话概括了这种情况:

当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先

What!还有这种操作?可能有部分同学还没 get 到上面这句话的意思,通俗的讲就是指定了 position:fixed 的元素,如果其祖先元素存在非 none 的 transform 值(如:transform: translate3D(0px, 0px, 0px) !important) ,那么该元素将相对于设定了 transform 的祖先元素进行定位。而不是相对视口(Viewport)定位了。

这个问题,就牵涉到了 Stacking Context ,也就是堆叠上下文的概念了。解释上面的问题分为两步:

  1. 任何非 none 的 transform 值都会导致一个堆叠上下文(Stacking Context)和包含块(Containing Block)的创建
  2. 由于堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 viewport 定位,而是基于这个父元素。
Stacking Context – 堆叠上下文

好的嘛,好的嘛,又冒出新的名词了,堆叠上下文(又译作层叠上下文),又是什么?

堆叠上下文(Stacking Context):堆叠上下文是 HTML 元素的三维概念,这些 HTML 元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的 z 轴上延伸,HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

概念比较抽象,简单理解,记住 生成了 Stacking Context 的元素会影响该元素的层叠关系与定位关系。

关于 生成了 Stacking Context 的元素会影响该元素的层叠关系 这一点,具体可以看看这篇文章 层叠顺序(stacking level)与堆栈上下文(stacking context)知多少?

而本文提到了生成了 Stacking Context 的元素会影响该元素定位关系 。按照上面的说法,堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 viewport 定位,而是基于这个父元素。

那么问题来了,是否所有能够生成堆叠上下文的元素,都会使得其子元素的 position:fixed 相对它,而不是相对视口(Viewport)进行定位呢?

创建堆叠上下文的方式

为此,首先要找到所有能够使元素生成堆叠上下文的方法。

So,如何触发一个元素形成 堆叠上下文 ?方法如下(参考自 MDN):

1 .根元素 (HTML),
2. z-index 值不为 "auto"的 绝对/相对定位,
3. 一个 z-index 值不为 "auto"的 flex 项目 (flex item),即:父元素 display: flex|inline-flex,
4. opacity 属性值小于 1 的元素(参考 the specification for opacity),
5. transform 属性值不为 "none"的元素,
6. mix-blend-mode 属性值不为 "normal"的元素,
7. filter值不为“none”的元素
8. perspective值不为“none”的元素,
9. isolation 属性被设置为 "isolate"的元素,
10. position: fixed
11. 在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值
12. -webkit-overflow-scrolling 属性被设置 "touch"的元素

总结:

所以,MDN 关于 position:fixed 的补充描述不够完善。下述 3 种方式目前都会使得 position:fixed 定位的基准元素改变(本文重点):

  1. transform 属性值不为 none 的元素
  2. perspective 值不为 none 的元素
  3. 在 will-change 中指定了任意 CSS 属性

原文地址

2. 当父元素设置flex-direction:column;子元素默认width充满父元素

  1. 解决方案
align-self: baseline;
  1. 原因

元素设置flex-direction:column;时,默认align-self:stretch;

  1. align-self属性
    stretch:元素被拉伸以适应容器。

如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。

baseline:元素位于容器的基线上。
如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值