CSS Tab的实现

CSS Grid

最重要的两件事：

1. 指定要设定为"grid"的父元素
2. 设定grid-tempalte-columns

position

当position为"absolute"时，取绝对定位机制。当其为left: 0, top: 0时，则位置定位在浏览器客户端，也即页面的最左上角。而不管此元素的层级是多少。

如果希望它在某个元素素中绝对定位，则需将此父元素的position设为"relative"即可。

此时，该元素就脱离了原来的流布局，腾出的空间由其他元素顶上。

一个"relative"的父元素，如果其所有子元素都为"absolute"，则意味着所有的子元素都脱离了流布局，不再占有父元素的任何空间，此时，父元素原被子元素占用的空间将被释放，从而变成一个没有高度的元素。若要避免这种情况出现，可以手工指定其height, 或min-height.

此时，如上图所示，两个元素可能相互重叠在一起。

使用z-index属性可以显式地指定哪个元素排在前面。z-index的值更高，则会挡住z-index的值更低的元素。默认值为"auto"，可将默认值视为0。

上面，将A的z-index设为"1"后，其值比B的默认值要大，因此，A排在B的前面。

z-index只对position为absolute的元素的起作用。

:target

Jump to the next paragraph!

This is a target paragraph, which means it can be linked to.

Jump to the next div!

当有链接指向某个目标，在我们点击了链接，成功跳至该页面上的目标后，这个目标可以通过":targt"伪类来选中，我们就可以对其设置特定的样式。

":targt"的特点有两个。第一个特点是被选中是动态的，只有在点击了链接后并链至目标后，目标才可被选中。第二个特点是一个页面上任何一个时间只能有一个目标被选中，前面的目标会因后面的目标被选中而失去效用。