Day2：写前端项目（html+css+js）

如何点击这个button，让他有个外边框

效果：

.large-button {
    position: relative;
    display: grid;
    z-index: 1;
    place-items: center;
    padding: 0 2em;
    border-radius: 50%;
    aspect-ratio: 1;
    text-decoration: none;
}
 
.large-button::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: hsl( var(--clr-white) / .15);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 500ms linear, transform 750ms ease-in-out;
}
 
.large-button:hover::after,
.large-button:focus::after {
    opacity: 1;
    transform: scale(1.5);
}

 如何应用hover在伪类上面：

元素:hover::after{ 样式 }

hover效果经过 after伪类时写法_sometime`something的博客-CSDN博客_hover改变after

Z-index 

可以自己操作玩一下

Z-index 作用在定位元素，不作用在非定位元素上。

定位元素就是：position: relative, absolute, sticky, or fixed.

z-index的堆叠上下文有关系：

如果一个元素的z-index 为100，他的父元素z-index 为1。另一个元素的z-index 为50，他的父元素的z-index为2，那么另一个元素还是在第一个元素的上面。

• 无z-index或者z-index值相等时，堆叠顺序均由元素在文档中的先后位置决定，后出现的会在上面
• 当向上追溯找不到含有z-index值的父元素的情况下，则可以视为自由的z-index元素（不用根据父元素）
• 自由的z-index元素可以与其他自由的定位元素或者父元素的同级兄弟定位元素来比较z-index的值，决定其堆叠顺序
• z-index值只决定同一父元素中的同级子元素的堆叠顺序

• 父元素的z-index值为子元素定义了堆叠顺序，即子元素依赖于父元素z-index值来获得页面中的堆叠顺序

Learn Z-Index Using a Visualization Tool

Postion到底是什么？？

文档流是什么？

从上到下，从左到右排列

Relative：

relative保持原有文档流，但相对本身的原始位置发生位移，且占空间

absolute

（直接浮动起来了）脱离文档流，相对于其包含块来定位，且不占位。absolute元素则相对于父元素进行定位，

absolute元素不占位，因此下一个符合普通流的元素会略过absolute元素排到其上一个元素的后方

fixed

脱离文档流，相对于浏览器窗口来定位，且不占位

CSS的position和z-index有关 | Here. There.  <-------这篇文章写的很好！