层叠加的五条叠加法则（2）

作者：14px 来源：蓝色理想时间：2009-05-01 12:07:00　

法则二：同辈元素同为动态定位时，且有z-index设置时，z-index值大者居上。

运行代码框

法则二：同辈元素同为动态定位时，且有z-index设置时，z-index值大者居上。运行代码框

法则三：同辈元素定位方式不同时，动态定位居上。

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>法则三：同辈元素定位方式不同时，动态定位居上。</title> </head> <style type="text/css"> div { font:12px/1.5 arial;} div strong { color:#fff; background:#036; display:inline-block;} h3 strong { color:#f00;} /*--- 定义方块外形 ---*/ .div1, .div2 { height:70px; width:150px; background:#cff; border:1px solid #036; } .grandDiv1, .grandDiv2 { padding:10px; border:1px solid #060; width:174px; background:#cf9; } .parentDiv1, .parentDiv2 { padding:10px; border:1px solid #f06; width:152px; background:#fcf; } /*--- 定义方块偏移位置、文字位置 ---*/ .grandDiv2 { margin-top:-50px; margin-left:95px; } .parentDiv2 { margin-top:-40px; margin-left:85px; } .div2 { margin-top:-20px; margin-left:75px; padding-top:30px; height:40px; } .grandDiv2 .parentDiv2, .grandDiv2 .div2, .parentDiv2 .div2 { margin:0;} </style> <body> <h3>法则三：同辈元素定位方式不同时，动态定位居上。</h3> <div class="div1" style="position:relative;">.div1{position.relative}</div> <div class="div2">.div2{position.static}</div> <div class="div1">.div1{position.static}</div> <div class="div2" style="position:absolute;">.div2{position:absolute}</div> </body></html>

则四：非同辈元素，任意一者及其祖元素不具备动态布局时，html靠后者居上。

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>法则四：非同辈元素，任意一者及其祖元素不具备动态布局时，html靠后者居上。</title> </head> <style type="text/css"> div { font:12px/1.5 arial;} div strong { color:#fff; background:#036; display:inline-block;} h3 strong { color:#f00;} /*--- 定义方块外形 ---*/ .div1, .div2 { height:70px; width:150px; background:#cff; border:1px solid #036; } .grandDiv1, .grandDiv2 { padding:10px; border:1px solid #060; width:174px; background:#cf9; } .parentDiv1, .parentDiv2 { padding:10px; border:1px solid #f06; width:152px; background:#fcf; } /*--- 定义方块偏移位置、文字位置 ---*/ .grandDiv2 { margin-top:-50px; margin-left:95px; } .parentDiv2 { margin-top:-40px; margin-left:85px; } .div2 { margin-top:-20px; margin-left:75px; padding-top:30px; height:40px; } .grandDiv2 .parentDiv2, .grandDiv2 .div2, .parentDiv2 .div2 { margin:0;} </style> <body> <h3>法则四：非同辈元素，任意一者及其祖元素不具备动态布局时，html靠后者居上。</h3> <div class="parentDiv1"> .parentDiv1{position:staitc} <div class="div1">.div1{position:staitc}</div> </div> <div class="parentDiv2"> <div class="div2">.div2{position:staitc}</div> .parentDiv2{position:staitc} </div> <div class="grandDiv1"> .grandDiv1{position:staitc} <div class="parentDiv1"> .parentDiv1{position:staitc} <div class="div1">.div1{position:staitc}</div> </div> </div> <div class="grandDiv2"> <div class="parentDiv2"> <div class="div2">.div2{position:staitc}</div> .parentDiv2{position:staitc;} </div> .grandDiv2{position:static;} </div> </body></html>

第一页上一页 1

3 下一页

标签：层,叠加,css,元素

投稿

层叠加的五条叠加法则（2）

猜你喜欢

Python中更优雅的日志记录方案详解

多级联动下拉选择框，动态获取下一级

Windows64x下VScode下载过程

一个简单的python爬虫程序爬取豆瓣热度Top100以内的电影信息

怎样在SQL Server中去除表中不可见字符

SQL Server控制语句的基本应用

浅谈Golang 切片（slice）扩容机制的原理

Yii框架学习笔记之应用组件操作示例

python3.7简单的爬虫实例详解

mysql 8.0.20 winx64安装配置方法图文教程

Python中文件的读取和写入操作

Python基于回溯法子集树模板解决野人与传教士问题示例

微信小程序开发常用功能汇总

python矩阵运算,转置,逆运算,共轭矩阵实例

python 连续不等式语法糖实例

网页用多宽才更合适？

Python一些线程的玩法总结

SQL Server的怪辟：异常与孤立事务

Python logging模块进行封装实现原理解析

PHP中LINE,FILE,DIR等常用魔术常量实例讲解

层叠加的五条叠加法则（2）

猜你喜欢

Python中更优雅的日志记录方案详解

多级联动下拉选择框，动态获取下一级

Windows64x下VScode下载过程

一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息

怎样在SQL Server中去除表中不可见字符

SQL Server控制语句的基本应用

浅谈Golang 切片（slice）扩容机制的原理

Yii框架学习笔记之应用组件操作示例

python3.7简单的爬虫实例详解

mysql 8.0.20 winx64安装配置方法图文教程

Python中文件的读取和写入操作

Python基于回溯法子集树模板解决野人与传教士问题示例

微信小程序开发常用功能汇总

python矩阵运算,转置,逆运算,共轭矩阵实例

python 连续不等式语法糖实例

网页用多宽才更合适？

Python一些线程的玩法总结

SQL Server的怪辟：异常与孤立事务

Python logging模块进行封装实现原理解析

PHP中__LINE__,__FILE__,__DIR__等常用魔术常量实例讲解

一个简单的python爬虫程序爬取豆瓣热度Top100以内的电影信息

PHP中LINE,FILE,DIR等常用魔术常量实例讲解