css布局学习笔记之position属性
2014-02-21 13:37
507 查看
position属性用于定位元素,它的几个值分别如下:
1,static
2,relative
relative 相对于自己在文档流中本来的位置进行定位,设置
3,fixed
一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和
4,absolute
多个同级absolute元素会重叠在一起,重叠是按代码本身顺序排列,越后输入的其越靠前(浮在上面)。除非元素设置了z-index属性,z-index属性值越大越靠前。
这些都是理论知识,加上一点小练习就能够理解,但是具体的用处,还有待多看多练。做个小小的笔记,记录自己的学习。
1,static
static是默认值。任意
position: static;的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”,一个 position 属性被设置为其他值的元素表示它会被“positioned”。
2,relative
relative 相对于自己在文档流中本来的位置进行定位,设置
top、
right、
bottom和
left属性会使其偏离其正常位置。不脱离文档流,其他的元素则不会调整位置来弥补它偏离后剩下的空隙。
3,fixed
一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和
relative一样,
top、
right、
bottom和
left属性都可用。脱离文档流,不会保留它原本在页面应有的空隙。
4,absolute
absolute与
fixed的表现类似,除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动。
多个同级absolute元素会重叠在一起,重叠是按代码本身顺序排列,越后输入的其越靠前(浮在上面)。除非元素设置了z-index属性,z-index属性值越大越靠前。
这些都是理论知识,加上一点小练习就能够理解,但是具体的用处,还有待多看多练。做个小小的笔记,记录自己的学习。
相关文章推荐
- CSS学习笔记——定位position属性的学习
- CSS学习笔记之边缘属性和简单的布局
- CSS学习笔记——定位position属性的学习
- CSS布局学习笔记之position
- Bootstrap学习笔记-css布局 Hello_yihao的博客
- CSS布局中的几个重要属性,width,height,margin,padding,float,position
- web前端学习笔记(CSS固定宽度布局)
- 黑马程序员------学习笔记(9)android五种布局及布局属性
- css学习笔记---盒模型,布局
- CSS笔记:浅谈position属性
- CSS学习笔记——布局
- CSS布局学习笔记之图片居中
- css学习笔记(五)-字体属性
- CSS学习笔记:使用绝对定位实现横向两列布局
- web前端学习笔记(CSS变化宽度布局)
- html学习笔记(3)-CSS padding margin border属性详解
- <div+css页面布局课堂笔记>4---与盒子相关的CSS属性
- CSS学习笔记1:初识CSS及其常见属性
- CSS学习笔记-CSS属性(五)
- CSS布局学习随手笔记