布局模型(8)CSS 包含块的概念

　　若包含元素中，子元素定义为绝对定位（position:absolute;left），而其父元素中，只要有一个父元素 CSS 定义为 position，则这个子元素就与定义 position 的父元素构成包含块关系。对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来决定自己的显示位置。

<!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>包含块关系示意</title> <STYLE type=text/css> html,body { height:100%; } div { border:1px red solid; background:#fff; padding:10px; } </STYLE> </head> <body> body <div>box1 <div style="position:relative;background:yellow;">box2<br />position:relative;background:yellow; <div>box3 <div>box4 <div>box5 <div style="position:absolute;left:100px;top:100px;background:#ccc;">box6<br />position:absolute;left:100px;top:100px;background:#ccc; <div>box7 </div> </div> </div> </div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

　　在上图中，子元素 box6 定义了绝对定义，它与具有相对定位的父元素 box2 构成了包含块的关系。

Home << 1 2 3 >> End

作者：yahu 发布时间：2008年10月26日点击数：【收藏】【打印文章】

上一篇：布局模型(7)CSS 2.0 盒模型探究　　下一篇：布局模型(9)高度自适应

动易雅虎

推荐阅读

布局模型(8)CSS 包含块的概念

作者：yahu 发布时间：2008年10月26日点击数：【收藏】【打印文章】

查看本文的所有评论 >>网友评论