CSS中position属性详解以及定位的说明——实验3
2012-02-27 22:36
806 查看
原文:http://blog.csdn.net/huang_xw/article/details/7300201
<!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" /> <title>实验3</title> <!--绝对定位: 有top与left时定位的参照体是body。--> <style type="text/css"> body { margin:20px; padding:0px; } .c1 { width:700px; height:100px; background-color:red; } .c2 { width:700px; height:100px; background-color:green; } .c3 { background-color:orange; position:absolute; top:50px; left:50px; } .c4 { width:700px; height:100px; background-color:blue; } </style> </head><body> <div class="c1">第一个块区域</div> <div class="c2">第二个块区域</div> <div class="c3">第三个块区域</div> <div class="c4">第四个块区域</div> </body> </html>效果如下图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/24/2f6682d8fe8b136c75d6a8d77b41d930.gif)
相关文章推荐
- CSS中position属性详解以及定位的说明——实验1
- CSS中position属性详解以及定位的说明——实验2
- CSS中position属性详解以及定位的说明——实验4
- CSS中position属性详解以及定位的说明
- CSS position 属性:绝对定位与相对定位,以及浮动
- CSS 详细解读定位属性 position 以及参数
- Css 详细解读定位属性 position 以及参数
- 图文详解CSS的position常用的三个属性:relative,absolute以及fixed,以及嵌套使用的一个常见情况
- CSS 详细解读定位属性 position 以及参数
- CSS 详细解读定位属性 position 以及参数
- css 属性定位position 详解
- 栋栋晓07:详解css布局中的定位position属性
- CSS学习笔记——定位position属性的学习
- CSS的position属性详解
- 总结一下CSS中的定位 Position 属性(转)
- CSS属性之定位属性详解
- CSS中position的4种定位详解
- css position定位详解
- css position: absolute、relative定位问题详解
- 深入理解css中的position定位和z-index属性,CSS的定位属性共有9个