CSS中position属性详解以及定位的说明——实验1
2012-02-27 22:31
856 查看
原文: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>实验1</title> <!--相对定位:定位的参照体是文档流中的位置。移动后,在文档流中的位置还是要保留。--> <style type="text/css"> body{ margin:0; padding:0; } .c1 { width:700px; height:100px; background-color:red; } .c2 { width:700px; height:100px; background-color:green; } .c3 { margin:20px; width:700px; height:50px; background-color:orange; position:relative; top:30px; left:30px; z-index:10; } .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>效果如下图:
![](http://hi.csdn.net/attachment/201202/27/0_1330353268hIK5.gif)
相关文章推荐
- CSS中position属性详解以及定位的说明——实验2
- CSS中position属性详解以及定位的说明——实验3
- 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个