DIV+CSS制作网页之如何设置z-index

2016-02-19 23:49 11 1 收藏

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的DIV+CSS制作网页之如何设置z-index懂设计的网友们快点来了解吧!

【 tulaoshi.com - Web开发 】

[参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统:Windows]

貌似很多同学对为什么这个div在上层,那个div在下层、无论如何设置z-index都无法居上的问题纠结抓狂、上吐下泻、恶心失眠、郁郁而终,致使不敢随意使用层的叠加。但层的叠加效果,在交互设计中却频频出现,所以我们必须驾驭它,要驾驭它,就要掌握其规律。

首先明确几点在文中所需要用到的概念

静态定位:position:static(为position属性的默认值)。 动态定位:position:relative或position:absolute或position:fixed。 祖元素:任意包含该元素的元素。 父元素:直接包含该元素的祖元素。 同辈元素:拥有共同的父元素的元素。

注:这些概念为作者自定义,仅用于本文。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

引用:

关于同辈元素是个非常关键的词,这里还需要详细解释一下。

div
    div/div
    div id="a"/div
    div/div
    div/div
    div/div
    div/div
/div
div id="f"
    div/div
    div id="b"/div
    div id="c"/div
    div/div
    div/div
    div/div
/div

在这个例子中,div#a与div#b并不是同辈元素,只有像div#b和div#c这样拥有同样父体div#f的的元素才能叫同辈元素。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

引用结束

接下来看看这五条法则

法则一:同辈元素定位方式相同,且无z-index设置时,html靠后者居上。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

来源:http://www.tulaoshi.com/n/20160219/1630715.html

延伸阅读
标签: Web开发
你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadd...
标签: Web开发
现将《2天驾驭DIV+CSS》教程的目录列出,以方便大家学习! ================================= 基础 DIV+CSS的叫法是不准确的 使用Table布局是不明智的 xHTML+CSS与SEO CSS如何控制页面 CSS选择器 CSS选择器命名及常用命名 盒子模型 块状元素和内联元素 ================================= 课程 盒模型、块状元素与内联元素、CSS选...
标签: Web开发
以前用FLASH作过一个FLASH相册—网络版 这个效果有点学这个的意思。 为了一行了的代码,我已经花了两个晚上来想了,结果下来就是感觉IE有点变态。用正常的想法去作,FIREFOX 等浏览器都没有问题,只有IE不可以。只有加那么一行垃圾代码,IE才能正常显示。 以下就是效果: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E...
标签: Web开发
“div+CSS”俨然已成为一种“时尚”,“重构”的春风吹遍大江南北,互联网一时间风声鹤唳,难以尽数的网站都不约而同地开始了自己的“重构”。然而打开这形形色色网站的源代码,却时常令人哑然失笑—— 我们看到有嵌套6、7层的div布局,有不用table的表格,有纯div+a构成的页面,有成百上千的表现层class……现在关于标准的书籍越来越...
标签: Web开发
单行一列 以下是引用片段: body { margin: 0px; padding: 0px; text-align: center; }  #content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }  两行一列 以下是引用片段: body { margin: ...

经验教程

422

收藏

42
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部