你需要知道的CSS属性isolation

更新日期: 2023-12-07阅读: 230标签: 属性

嗨伙计!今天我想谈谈一个 css 功能,在我看来,它并没有引起太多关注......但它应该!我说的是isolation属性!它基本上提供了对元素如何与文档其余部分交互的更多控制,并且它通常是解决z-index 问题的优雅解决方案。

让我们从一个实际的例子开始。我制作了这张简单的卡片


它的html非常简单看起来像这样:

<article class="card">
  <header class="card__header">
    <img class="card__avatar" src="..." alt="..." />
    <span class="card__name">Daniel Clifford</span>
    <span class="card__role">Verified Graduate</span>
  </header>

  <p class="card__summary">I received ...</p>

  <p class="card__description">I was an EMT ...</p>
</article>

还应用了一些样式,以便设置颜色、排版和布局。但是,我们可以完全忽略它们,因为它们在我们现在要做的事情中不会发挥任何作用。

现在,假设我们要在卡片的右上角添加一个引号图像,作为一个小装饰元素。像这样的东西:


我们如何才能实现这一目标?

我们可以将引号图像视为伪元素,并将position: absolute其放置在卡片上!让我们来尝试一下吧:

.card {
  /* We want the .card element to be the containing block for its children .card::before */
  position: relative;
}

.card::before {
  /* This is a pseudo-element, so we need to give it a content by definition */
  content: "";

  /* We position our image over the card, with a little offset from the right */
  position: absolute;
  right: 2em;

  /* We define a size for our image */
  width: 150px;
  aspect-ratio: 1; /* This makes sure that the image is a square */

  /* We bring in our image through a background-image */
  background-image: url(https://raw.githubusercontent.com/francescovetere/testimonial-grid-section/main/images/bg-pattern-quotation.svg);
  background-repeat: no-repeat;
  background-size: contain; /* This makes sure that the background actually fills all the available space (150px x 150px) */
}

这是我们得到的结果:


它看起来不错,除了一个小问题:我们想将此图像推到文本后面

这就是我们z-index发挥作用的地方。一点点z-index: -1就可以了,对吧?嗯...不完全是


它……消失了?!

好吧,如果你仔细想想,这是完全有道理的:默认情况下,每个z-index: 0元素都会有一个. 因此,这就像说默认情况下页面上的每个元素都位于同一层上。

z-index: -1当我们在伪元素上声明 a 时,我们实际上是将其推到默认层下

我们该如何解决这个问题?

理想情况下,我们希望有一个本地的作用域的 z-index:当我说我希望我的伪元素有一个时z-index: -1,我真正的意思是:“在所有东西后面,但不要在卡片本身后面!”

这个概念实际上内置于 CSS 中,它被称为堆叠上下文!

堆栈上下文基本上由一个元素定义,该元素充当其子级声明的z-index。特别是,孩子们永远无法逃脱他们的堆叠环境,无论他们的堆叠环境有多低z-index。

默认情况下,纯HTML 文档将具有单个堆栈上下文,并且每个元素都引用它。这就是为什么当我们分配z-index: -1给伪元素时,它被一路推回:只有一个全局堆栈上下文!

但是,当然,我们也可以在任意元素上创建新的堆叠上下文!

我们可以通过多种方式在元素上创建新的堆叠上下文。他们之中有一些是:

  • transform为其分配a ;
  • filter为其分配a ;
  • opacity为其分配一个;
  • ...

您可以在此处找到完整的属性列表。

所有这些方法都有一个大问题:它们也有副作用!

是的,他们创建了一个堆叠上下文,这就是我们想要的,但他们也做了其他一些事情,这也许是我们不一定想要的
我的意思是,为什么我应该被迫对元素应用不透明度来创建堆叠上下文,即使我一开始根本不想应用任何不透明度?

幸运的是,有一个简单的解决方案,那就是隔离

isolation是一个特殊属性,其唯一且独特的目的是在其所应用的元素上创建新的堆叠上下文,并且没有其他副作用

它接受两个值,auto和isolate。当然isolate是我们想要的。

所以,就是这样!这个问题的最终解决方案非常简单:

.card {
  position: relative;
  isolation: isolate;
}

这是所有代码的结果,如果你想搞乱它!

翻译来自:https://dev.to/francescovetere/the-css-property-you-didnt-know-you-needed-3fk0

链接: https://www.fly63.com/article/detial/12598

display: none;与visibility: hidden;的区别

display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见,display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;

属性设置百分比时的计算参考汇总

元素宽高width,min-width,max-width等元素宽度设置百分比,以包含块的宽度为标准进行计算;height,min-height,max-height等元素宽度设置百分比,以包含块的高度为标准进行计算;

readonly与disabled的区别

readonly 只对 <input> 和 <textarea> 标签有效;disabled 对所有表单元素都有效, 包括:<input>, <textarea>, <button>, <label>, <option>, <select>等

css的overflow属性

事实上我挺长一段时间都没弄清楚overflow:scroll与overflow:auto的差别,今天测试了一下,总算是明白了。visible: 不剪切内容。hidden: 将超出对象尺寸的内容进行裁剪,将不出现滚动条。scroll: 将超出对象尺寸的内容进行裁剪,并以滚动条的方式显示超出的内容。

Vue Prop属性功能与用法实例

这篇文章主要介绍了Vue Prop属性功能与用法,结合实例形式较为详细的分析了vue.js中Prop属性的功能、原理、使用方法及相关操作注意事项,写的十分的全面细致,具有一定的参考价值

深入剖析z-index属性

层叠顺序的大小比较;层叠顺序级别高的元素覆盖级别低的元素。首先要注意,z-index:auto 虽然可以看作z-index:0 ,但是这仅仅是在层叠顺序的比较上;从层叠上下文上讲,二者有本质差别:auto 不会创建层叠上下文,z-index:0 会创建层叠上下文。

Vue.js-计算属性和class与style绑定

所有的计算属性都以函数的形式写在Vue实例中的computed选项内,最终返回计算后的结果。在一个计算属性中可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果即可。

css属性分类介绍

CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position 定位 列表/表格 多列属性 可伸缩框属性 列表属性 Grid属性 Table属性 动画属性 Animation 动画属性 Transition 过渡属性

css中word-wrap white-space word-break textoverflow的使用

word-wrap正常来说,在一行文本中,如果出现这一行已经放不下的单词,浏览器会自动将该文字转入下一行。white-space规定段落中的文本不进行换行。

css使用到的border边框属性

border 在一个声明中设置所有的边框属性。 border-bottom在一个声明中设置所有的下边框属性。border-bottom-color设置下边框的颜色。border-bottom-style设置下边框的样式。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!