css position:absolute和position:relative
来源:互联网 发布:飞豆打印软件 连打 编辑:程序博客网 时间:2024/04/30 11:55
position属性规定元素的定位值
有四个值
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
在没有设定top, right, bottom, left,默认依据父级的坐标原始点为原始点。
如果设定top, right, bottom, left并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由top, right, bottom, left决定。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit
规定应该从父元素继承 position 属性的值。
绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型??
例如
<div class="a"> <a class="name"> 测试 </a> <span class="b"> </span></div>
.a{ width: 220px; height: 38px; cursor: pointer; position: relative; line-height: 38px; color: #333333;}.b{ background: url(http://img3.douban.com/f/fm/33fff010d098b0775e981c2b27b7a0d32dcbe2a2/pics/fm/home/ic_play_current1a.gif) no-repeat; width: 11px; height: 11px; position: absolute; right: 21px; top:13px; display: inline-block;}.name{ display: block; background:rgba(198,211,205,0.5); width: 205px; height: 38px; text-indent: 24px;}
当a为relative或fixed ,b为absolute,b的父容器是a,会相对a确定位置,显示结果
如果去掉a 的position:relative属性,或者换成static 或inherit,这时b的父容器是body,显示结果
0 0
- css position:absolute和position:relative
- css position: absolute relative
- position absolute和relative
- position(relative和absolute)
- position:absolute和relative
- css中position中的relative和absolute
- CSS,浅析position中Relative和Absolute
- CSS 中 Position relative 和 absolute区别
- css中的position属性absolute和relative
- CSS的position属性:relative和absolute
- css - position:absolute和position:relative的区别
- css position: absolute、relative详解
- css中position relative absolute
- CSS position: absolute, relative详解
- css position: absolute、relative详解
- css中position:absolute|relative
- css position: relative,absolute详解
- css position- absolute、relative详解
- 罗永浩:锤子手机瑕疵比例是有点高 将推翻新版
- 黑马程序员--java高新技术----泛型
- python开发环境搭建
- Python特殊语法:filter、map、reduce、lambda [转]
- 黑马程序员----交通灯学习笔记
- css position:absolute和position:relative
- POJ 1664 放苹果
- NSMutableAttributedString使用
- char *s 和 char s[] 的区别小结
- 数据分析的陷阱
- 程序员:下一次面试前你需要准备的五个基本步骤
- DelphiXE5-FrieMonkey获取手机的IMSI等信息
- 在Eclipse使用SVN检出Maven项目
- 内核API