Web网页设计之css_9. z-index和display

一、z-index

我们说这个 z-index 之前先来看一个例子

可以看到啊，我们让两个 div 块进行 position 定位，而且都是以这个浏览器为基准进行偏移，但是我们可以发现，少了一个 div，这个 div 其实是存在的，不显示的原因是被覆盖掉了

如果我们想让 a2 显示在下面，我们还得去移动这个 div 块的顺序，如何在不变 html 代码的情况下，让 a2 显示到下面，这里我们就需要用到 z-index，来试一下

我们给这个 a1 的块设置了一个 z-index，这样就能让 a1 块显示在上面了。

这个 z-index 是可以改变标签和标签的垂直空间位置的，数字越大就越先显示

二、display

这个 display 是用于修改元素性质的，好比 div 块，原本 div 是块级元素，我们可以通过修改 display 让这个 div 编程行级元素

直接上例子

我们给 a1 设置一个 display，并且设定为 inline

我们可以看到，啥也没有了，这个不是 display将他们删除了，而是这两个 div 块编程行级元素之后，因为没有值，所以就没有办法显示，我们只需要给 div 块弄几个值即可

是不是变成了行级元素了。

当然，我们还能让这个行级元素变成块级元素

这里呢，我们是修改成 block即可

 

这篇博客就到这里，一下篇开始说这个 jQuery，有问题可以联系我QQ：2100363119

欢迎大家访问我自己的网站：https://www.lemon1234.com