css相对定位:CSS相对定位方法实例来源: 发布时间:星期四, 2009年2月12日 浏览:204次 评论:0
当容器  position属性值为relative时 这个容器即被相对定位了 相对定位和其他定位相似也是独立出来浮在上面不过相对定位容器top(顶部)、bottom(底部)、left(左边)和right(右边)属性参照对象是其父容器4条边而不是浏览器窗口并且相对定位容器浮上来后其所占位置仍然留有空位后面无定位容器仍然不会“挤”上来在D:\web\目录下创建网页文件(XHTML1.0)命名为pos_rel.htm编写pos_rel.htm文件代码如代码11.22所示代码11.22 CSS相对定位:pos_rel.htm <!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; char  =gb2312" /><title>CSS相对定位</title> <style type="text/css"> *{margin: 0px; padding:0px;} #all{width:400px; height:400px; background-color:#ccc;} #fixed{width:100px; height:80px; border:15px ridge #f00; background-color:#9c9; position:relative; top:20px; left:20px;} #a,#b{width:200px; height:120px; background-color:#eee; border:2px out #000;}</style></head> <body> <div id="all"> <div id="a">第1个无定位 div容器</div><div id="fixed">相对定位 容器</div><div id="b">第2个无定位 div容器</div></div> </body> </html> 笔者给外部div设置了#ccc背景色 并给内部无定位div设置了#eee背景色而相对定位div容器设置了#9c9背景色并设置了in类型边框在浏览器地址栏输入http://localhost/pos_相对.htm浏览效果如图11.25所示 图11.25 CSS相对定位 相对定位 容器其实并未完全独立浮动范围仍然在父容器内并且其所占空白位置仍然有效地存在于前后两个容器的间1
相关文章读者评论发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
