html图片遮住字了,css 内容为何被遮挡住了？

z-index

内容被遮挡住，第一反应会是层级关系是不是不对，然后就会拼命增加目标元素的z-index，然后可能就是死活没有用。那就慢慢来理清一下。

z-index 按照最通俗的用法就是解决元素的层级关系问题。

但其实我们用的时候可能经常会觉得很奇怪，为什么它就不起作用了呢。

有一个经常忽略的但是很重要的前提是：

positioned elements(即position属性值是非static的元素)。

默认值为auto，即元素不会建立一个新的本地堆叠上下文。当前堆叠上下文中新生成的元素和父元素堆叠层级相同。

一般遇到的是，代表生成的元素在当前堆叠上下文中的堆叠层级。

先借张图看看:

在这个例子中，每个被定位的元素都创建了独自的层叠上下文，因为他们被指定了定位属性和 z-index 属性。层叠上下文的层级如下：

Root

DIV #1

DIV #2

DIV #3

DIV #4

DIV #5

DIV #6

注意 DIV#4，DIV #5 和 DIV #6 是 DIV #3 的子元素，所以它们的层叠完全在 DIV #3 中被处理。一旦 DIV #3 中的层叠和渲染处理完成，DIV #3 元素作为一个整体传递给 root 元素，并相对兄弟元素层叠。

分辨出层叠的元素在 Z 轴上的渲染顺序的一个简单方法是将它们想象成一系列的版本号，子元素是其父元素版本号之下的次要版本。通过这个方法我们可以轻松得看出为什么一个 z-index 为 1 的元素(DIV #5)层叠于一个 z-index 为 2 的元素(DIV #2)之上，而一个 z-index 为 6 的元素(DIV #4)层叠于 z-index 为 5 的元素(DIV #1)之下。在我们的例子中(依照最终渲染次序排列)：

● Root

○ DIV #1 - z-index 为 5

○ DIV #2- z-index 为 2

○ DIV #3- z-index 为 4

■ DIV #4- z-index 为 6，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.6

■ DIV #5- z-index 为 1，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.1

■ DIV #6- z-index 为 3，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.3

总结:

给一个 HTML 元素定位和 z-index 赋值创建一个层叠上下文，(opacity 值不为 1 的也是相同)。

层叠上下文可以包含在其他层叠上下文中，并且一起创建一个有层级的层叠上下文。

每个层叠上下文完全独立于它的兄弟元素：当处理层叠时只考虑子元素。

每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会 在父层叠上下文中 按顺序进行层叠。

overflow

一般在写样式的时候，很随手就写下了overflow: auto，目的是想让滚动条在内容溢出的时候出现，但是也正因为这样，才会遇到很多时候，内容就会被莫名其妙地遮挡住了。如下图所示：

可能遇到内容被挡住，第一反应是甩锅给z-index，一定是层级不够。emmmmmmm，虽然也会有这样的情况，但是如果排除了z-index之外，第二个应该要考虑的是overflow熟悉了。

属性值如下：

visible 默认值。内容不会被修剪，会呈现在元素框之外

hidden 内容会被修剪，并且其余内容不可见

scroll 内容会被修剪，浏览器会显示滚动条以便查看其余内容

auto 由浏览器定夺，如果内容被修剪，就会显示滚动条

inherit 规定从父元素继承overflow属性的值

其实，换个角度可以这么想，auto / scroll的意思是在滚动条可以滚到的地方，内容是不会被修剪得，可如果内容在滚动条滚不到的地方，那就是被修剪了，得用visible啦。