CSS中position的4种定位详解
2016-03-13 19:59
609 查看
大家都知道,css中的position有4种取值,分别是static、fixed、relative、absolute。
详细解释:
static:相当于没有定位,元素会出现在正常的文档流中。
fixed:元素框的表现类似于absolute,但是fixed是相对于视窗本身,也就是浏览器窗口而定位的。所以,采用该定位的元素在页面下拉的时候,其位置并不会发生变化。
relative:生成相对定位的元素,相对于元素本身的位置进行定位,它原本所占的空间仍然会保留。
absolute:生成绝对定位的元素,相对于static定位以外的第一个有定位的祖先元素进行定位。由于static定位相当于没有定位,所以absolute定位实际上就是相对于有定位的第一个祖先元素定位,如果所有的祖先元素都没有定位,则相对于初始包含块或者画布,一般就是body元素定位。
详细解释:
static:相当于没有定位,元素会出现在正常的文档流中。
fixed:元素框的表现类似于absolute,但是fixed是相对于视窗本身,也就是浏览器窗口而定位的。所以,采用该定位的元素在页面下拉的时候,其位置并不会发生变化。
relative:生成相对定位的元素,相对于元素本身的位置进行定位,它原本所占的空间仍然会保留。
absolute:生成绝对定位的元素,相对于static定位以外的第一个有定位的祖先元素进行定位。由于static定位相当于没有定位,所以absolute定位实际上就是相对于有定位的第一个祖先元素定位,如果所有的祖先元素都没有定位,则相对于初始包含块或者画布,一般就是body元素定位。
相关文章推荐
- CSS【2】-- CLASSES AND IDS
- 使用CSS3线性渐变(linear-gradient)实现文本波浪线效果
- CSS入门基础
- CSS左侧固定宽 右侧自适应(兼容所有浏览器)
- View圆角以及边框的设置
- #001 博客园的 MarkDown 代码样式如何设置
- jqGrid为特殊行添加样式
- 复杂 Listview 显示 多个样式
- 【学习笔记】CSS概述
- css中的zoom的使用
- CSS中空格和>区别,A B, A>B
- css学习任务一:绘制九宫格
- 外联css及js的使用
- CSS3详解:transform
- CSS3实现图形曲线阴影和翘边阴影
- CSS3实现翻转(Flip)效果
- css3 同时加载两个动画
- CSS中background-position使用技巧
- CSS 常用命名
- css3动画,阴影,加快页面加载,块级模式的小总结