第014讲 CSS 定位
2015-07-04 17:33
781 查看
1. CSS 定位
![](http://img.blog.csdn.net/20150704163000675)
![](http://img.blog.csdn.net/20150704163047030)
2. 相对定位
![](http://img.blog.csdn.net/20150704164140327)
相对定位:相对原来的位置。虽然脱离的标准流,但是它的空间不能被占用。
![](http://img.blog.csdn.net/20150704165248276)
3.绝对定位
![](http://img.blog.csdn.net/20150704165859426)
绝对定位是指:对该元素最近的那个脱离了标准流的元素的定位,如果没有父元素(或者父元素没有脱离标准流),则相对body左上角定位。
3.1 父元素没有脱离标准流
![](http://img.blog.csdn.net/20150704170932847)
3.2 父元素脱离标准流
![](http://img.blog.csdn.net/20150704171735139)
4. fixed 定位
fixed 定位:指不管怎么样,总是以视窗的左上角定位。
left,top 对static定位没有效果。static定位,左右移动是用margin-left , margin-top 移动位置。
5. z-index
![](http://img.blog.csdn.net/20150704173205307)
用于设置对象(div)显示的时候,层叠的属性,值越小,越在下面。
2. 相对定位
相对定位:相对原来的位置。虽然脱离的标准流,但是它的空间不能被占用。
.div1{ width:70px; height:30px; background:silver; float:left; margin-left:5px; } #spe{ position:relative; left:40px; top:100px; }
<html> <head> <link rel="stylesheet" type="text/css" href="aa.css"> </head> <body> <div class="div1">内容1</div> <div id="spe" class="div1">内容2</div> <div class="div1">内容3</div> <div class="div1">内容4</div> </body> </html>
3.绝对定位
绝对定位是指:对该元素最近的那个脱离了标准流的元素的定位,如果没有父元素(或者父元素没有脱离标准流),则相对body左上角定位。
#spe{ position:absolute;/*绝对定位*/ left:40px; top:100px; }
3.1 父元素没有脱离标准流
.div2{ width:200px; height:150px; background:pink; float:left; }
<div class="div2"> <div id="spe" class="div1">内容2</div> </div>
3.2 父元素脱离标准流
.div2{ position:relative; left:100px; top:100px; width:200px; height:150px; background:pink; float:left; }
4. fixed 定位
fixed 定位:指不管怎么样,总是以视窗的左上角定位。
left,top 对static定位没有效果。static定位,左右移动是用margin-left , margin-top 移动位置。
5. z-index
用于设置对象(div)显示的时候,层叠的属性,值越小,越在下面。
<style> #idParentDiv{width:100%;height:120px;padding:6px;background-color:buttonshadow;position:relative;} #idDiv1{width:160px;height:80px;background-color:#FFD700;padding:6px;position:absolute;z-index:3;left:9px;top:9px;z-index:6;} #idDiv2{width:120px;height:80px;background-color:thistle;padding:6px;position:absolute;z-index:3;right:9px;bottom:9px;z-index:4;} #idDiv3{width:140px;height:80px;background-color:lightskyblue;padding:6px;position:absolute;z-index:3;left:150px;top:25px;z-index:5;} #idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;} </style> <div id=idParentDiv> <div id=idDiv1><img src="images/rdl_body3.jpg" style="border:1px solid #FFFFFF;"><br>z-index : 6 ; </div> <div id=idDiv2><img src="images/rdl_body1.jpg" style="border:1px solid #FFFFFF;"><br>z-index : 4 ; </div> <div id=idDiv3><img src="images/rdl_body2.jpg" style="border:1px solid #FFFFFF;"><br>z-index : 5 ; </div> </div>
相关文章推荐
- 纯CSS3实现超酷的鼠标悬停效果
- css选择器优先级
- CSS3制作漂亮的3D表单
- 遮罩层样式
- 纯CSS打造银色MacBook Air(一)
- 【经验】在CSS中定义a:link、a:visited、a:hover、a:active顺序
- 【经验】在CSS中定义a:link、a:visited、a:hover、a:active顺序
- 安卓学习之计算器样式
- CSS使用示例
- CSS3实战
- CSS透明属性详解代码
- CSS透明属性详解代码
- 利用CSS3实现气泡效果的教程
- CSS动画
- 禁止鼠标右键,图片延迟加载,css笔记
- 高自由度样式JQ图片滚动特效源码
- css3--网页横向四等分(display:box)
- Css控制网页变灰
- css盒子模型
- 【css3实践】position遇到一点小问题待解决