CSS层叠加的原则
静态定位:position:static(为position属性的默认值)。
动态定位:position:relative或position:absolute或position:fixed。
祖元素:任意包含该元素的元素。 父元素:直接包含该元素的祖元素。 同辈元素:拥有共同的父元素的元素。
注:这些概
念为作者自定义,仅用于本文。
引用:
关于同辈元素是个非常关键的词,这里还需要详细解释
一下。
<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的的元素才能叫“同辈元素”。
引用结束
接
下来看看这五条法则
:
法则一
:同辈元素定位方式相同,且无z-index设置
时,html靠后者居上。
法
则二
:同辈元素同为动态定位时,且有z-index设置时,z-index值大者居上。
猛点这里测试
法则三
:同辈元素定位方式不同时,动态定位居上。
猛点这里测试
法则四
:非同辈元素,任意一者及其祖元素不具备动态布局时,html靠后者居上。
猛点这里测试
法
则五
:【重要】非同辈元素,任意一者或其祖元素拥有动态定位时,同时各自向上寻找动态定位的祖元素,并分别从中拿出具备最高级别的祖元
素(或其本身)进行比较。
<div id="ab" style=
相关文档:
一:直接设置
二:画面上设置:
如:
<mx:Style>
TextArea{
font-size:36px
font-weight: bold
}
</mx:Style>
三:使用外置文件
<mx:Style source="style.csss"/> ......
<!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=gb2312" />
<title>CSS渐变条</ ......
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="c.css" mce_href="c.css" />
</head>
<body>
<div id="footer2">
this is a footer2 div
</div>
<p id=&qu ......
比如:
<div class="row" id="form_domain_container">
<label for="domain">域名:</label>
<input name="domain" value="<{$do->domain_name|escape}>" type="text" id="domain" size="35" maxlength= ......
一般而言,鼠标以斜向上的箭头显示,移到文本上时变为有头的竖线,移到超级链接上变为手型。但用css可控制鼠标的显示效果,如可使鼠标移到普通文本上也显示成手型。 用css控制的语法如下: span style="cursor:*"文本或其它页面元素/span 把 * 换成如下15个效果的一种:
一般而言,鼠标以斜向上的箭头显示,移到文本上 ......