html学习笔记-定位
2018-01-29 10:12
721 查看
定位position
定位指的就是将指定的元素摆放到页面的任意位置通过定位可以任意的摆放元素
通过position属性来设置元素的定位
可选值:
static:默认值,元素没有开启定位
relative:开启元素的相对定位
absolute:开启元素的绝对定位
fixed:开启元素的固定定位(也是绝对定位的一种)
相对定位relative
当元素的position属性设置为relative时,则开启了元素的相对定位当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化
相对定位是相对于元素在文档流中原来的位置进行定位
相对定位的元素不会脱离文档流
相对定位会使元素提升一个层级
相对定位不会改变元素的性质,块还是块,内联还是内联
当开启了元素的定位(position属性值是一个非static的值)时,可以通过left right top bottom四个属性来设置元素的偏移量
通常偏移量选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
绝对定位absolute
当position属性值设置为absolute时,则开启了元素的绝对定位绝对定位:
开启绝对定位,会使元素脱离文档流
开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化
绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位都会同时开启父元素的相对定位)如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位
绝对定位会使元素提升一个层级
绝对定位会改变元素的性质,内联元素变成块元素,块元素的宽度和高度默认都被内容撑开
固定定位fixed
当元素的position属性设置fixed时,则开启了元素的固定定位也是一种绝对定位,它的大部分特点都和绝对定位一样
不同的是:
固定定位永远都会相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动
注意:IE6不支持固定定位
相关文章推荐
- HTML学习笔记-定位
- <学习html>第三天笔记-链接标签;锚点定位、<base />标签;遇到标签之间关系的问题及解决方法
- html+css学习笔记 4[定位]
- 学习笔记:Html浮动元素的定位
- Android(OPhone) 学习笔记 - 定位(2)
- html学习笔记四
- HTML设计模式学习笔记
- HTML学习笔记(1) - HTML简介
- 机器人概率定位学习笔记第一篇_基本概念
- HTML&CSS基础学习笔记1.27-灵活地使用样式
- html学习笔记(四)——点击div实现网页页面跳转
- HTML入门学习笔记--基础标签(2)
- HTML入门学习笔记--列表标签(3)
- HTML学习笔记2
- HTML 基础学习笔记
- HTML学习笔记——如何让图片随鼠标移动
- HTML学习笔记(三) HTML 元素
- html学习笔记之列表
- html学习笔记(1)--处理特殊字符以及其他的一些小细节
- HTML学习笔记1-Html的全局属性