css相对定位使用示例
2014-04-30 16:52
411 查看
一.基本概念:
顾名思义,此种定位是相对某一个对象进行的偏移,相对定位并不能使对象脱离文档流,尽管它的位置可能产生偏移,但是对象初始位置仍然会被保留。
如果要真正掌握此种定位方式,搞清楚需相对于哪个对象进行偏移是关键点。
二.如何将一个元素设置为相对定位:
当一个对象的position属性值被设置为relative的时候就会发生相对定位:
三.定位参考对象:
可以使用top属性和left属性设置相对定位对象的偏移量。
相对定位的偏移参考对象是此对象本身。
代码实例:
首先看一个没有使用定位的代码实例:
在以上代码中,所有的对象都没有采用相对定位,这里无须多介绍了。
再来看一段采用相对定位的代码:
在以上代码中,first元素采用了相对定位,并产生偏移,偏移是以对象没有产生偏移前的位置为参考的。同时也可以看出,first元素的偏移前的位置依然会被保留,它周边的元素不能够占据。
特别说明:定位元素经常与z-index属性一起使用
顾名思义,此种定位是相对某一个对象进行的偏移,相对定位并不能使对象脱离文档流,尽管它的位置可能产生偏移,但是对象初始位置仍然会被保留。
如果要真正掌握此种定位方式,搞清楚需相对于哪个对象进行偏移是关键点。
二.如何将一个元素设置为相对定位:
当一个对象的position属性值被设置为relative的时候就会发生相对定位:
position:relative
三.定位参考对象:
可以使用top属性和left属性设置相对定位对象的偏移量。
相对定位的偏移参考对象是此对象本身。
代码实例:
首先看一个没有使用定位的代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="" /> <title>CSS相对定位-蚂蚁部落</title> <style type="text/css"> .father{ width:400px; height:400px; background-color:green; margin:50px; } .first{ width:100px; height:100px; background-color:red } .second{ width:100px; height:100px; background-color:blue } </style> </head> <body> <div class="father"> <div class="first"></div> <div class="second"></div> </div> </body> </html>
在以上代码中,所有的对象都没有采用相对定位,这里无须多介绍了。
再来看一段采用相对定位的代码:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="" /> <title>CSS相对定位</title> <style type="text/css"> .father{ width:400px; height:400px; background-color:green; margin:50px; } .first{ width:100px; height:100px; background-color:red; position:relative; left:20px; top:30px; } .second{ width:100px; height:100px; background-color:blue } </style> </head> <body> <div class="father"> <div class="first"></div> <div class="second"></div> </div> </body> </html>
在以上代码中,first元素采用了相对定位,并产生偏移,偏移是以对象没有产生偏移前的位置为参考的。同时也可以看出,first元素的偏移前的位置依然会被保留,它周边的元素不能够占据。
特别说明:定位元素经常与z-index属性一起使用
相关文章推荐
- 常用css属性查询表
- 部署到iis后无法加载运行CSS文件的解决方法
- 在Repeater控件中通过Eval的方式绑定Style样式代码
- 关于JS动态切换样式表
- border-radius 样式表CSS3圆角属性
- css文件和js文件后面带一个问号
- 响应式设计:理解设备像素,CSS像素和屏幕分辨率
- CSS3学习笔记(一)
- 客户端登录界面,根据输入框的弹出改变界面样式,解决键盘挡住输入框的问题
- 网页灰色效果样式
- PS的图层样式
- prefix css3漏斗Loading加载动画
- css3超炫8种loading加载特效
- CSS3:Transition属性详解
- css 中点,井号,逗号,空格,冒号用法
- Lodop6 以上打印控件使用,详参考自带说明文档,打印样式及文字大小要特殊设置一下
- WPCMS程序基于评论员用户角色样式显示
- iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效
- 如何用CSS实现背景半透明效果
- 自定义Seekbar拖动条样式