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 轴上的渲染

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

html下拉表覆盖透明,css透明元素如何遮挡住fixed元素
如图,导航栏是透明的元素,这个列表position设置成了fixed,脱离了文档流. 层级关系:导航栏的层级高于列表的层级. 如何让这个列表被导航栏遮住?除了下面这种改成纯色的方案,还有什么思路吗? ...
css实现图片虚化_什么? CSS 阴影竟然还有这种骚操作？
点击上方"IT平头哥联盟",选择"置顶或者星标" 与你一起成长- 原作者:cocoqiao 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 f ...
HTML和CSS内容总结
HTML和CSS内容总结 HTML和CSS内容总结 HTML内容 1.xhtml和html的区别 HTML5的版本介绍 HTML文档介绍 HTML中常用标签的使用注释语句基本标签文本格式化标签 ...
HTML5期末大作业：电商网站设计——仿淘宝电商网站管理系统21页(含毕业设计论文7500字) HTML+CSS+JavaScript
HTML5期末大作业:电商网站设计--仿淘宝电商网站管理系统21页(含毕业设计论文7500字) HTML+CSS+JavaScript 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. ...
css中图片整合的使用,CSS Sprites:图片整合技术详细案例
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.介绍了CSS Sprites技术的实现方法,优点和缺点.最后通过实例CSS Sprites技术制作导航栏演 ...
css html 字竖,CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
如何编辑图片上的文字？在线图片去字工具怎样使用？
现在我们从网上看到的很多图片都是带文字.水印的,在图片上添加文字既可以作为美化图片的一种方式,也可以作为水印来防止自己的图片被他人盗取使用,一般要编辑图片上的文字都需要比较专业的图片处理软件例如PS, ...
品优购网页制作（HTML和css内容）
品优购前期准备书写对应页面首页列表页注册页后话前期准备 1.准备一个大的文件夹,里面包括若干小的文件夹. 2.小的文件夹分为: css-----存储初始化样式以及各个页面的样式 imag ...
简单操作，只需3步完成在线图片加字编辑
怎样在模板中修改文字,更换字体样式呢?好看的图片还是需要通过文字来点缀才能发挥出更好的效果.最简单的是通过图片查看器进行文字编辑,现在的图片查看器都具有简单的图片处理功能,如下图所示. 想要对添加的文 ...

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

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

最新文章

热门文章