1.static:对象遵循常规流。此时4个定位偏移属性不会被应用。

2.relative对象遵循常规流,并且参照自身在常规流中的位置通过toprightbottomleft这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

3.absolute对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。(于是有了父相对,子绝对的套路)

4.fixed:与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。

5.sticky:对象在常态时遵循常规流。它就像是relativefixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed该属性的表现是现实中你见到的吸附效果。(CSS3)

总结:定位属性的用法具体大致就这么多,参考css手册总结的。

center:与absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3)
page:与absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3)

position:static | relative | absolute | fixed | center | page | stickycenter,page 与absolute一致,后面三个为css3属性
1.当position的值为非static时,其层叠级别通过z-index属性定义。
2.绝对定位的元素,在top,right,bottom,left属性未设置时,会紧随在其前面的兄弟元素之后,但在位置上不影响常规流中的任何元素。

css定位position属性深究的更多相关文章

  1. CSS学习笔记——定位position属性的学习

    今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...

  2. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  3. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  4. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  5. 《css定位 position》课程笔记

    这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...

  6. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  7. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  8. 定位--position属性

    一.定位--position属性 1.static:默认值 没有定位--以标准文档流方式显示 2.relative:相对定位--相对自身原来的位置进行偏移(top left right bottom) ...

  9. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

随机推荐

  1. Lightoj 1012 - Guilty Prince

    bfs遍历一遍就行了. /* *********************************************** Author :guanjun Created Time :2016/6/ ...

  2. Map dependencies with code maps

    https://docs.microsoft.com/en-us/visualstudio/modeling/map-dependencies-across-your-solutions Instal ...

  3. YTU 2892: I--免费看电影

    2892: I--免费看电影 时间限制: 1 Sec  内存限制: 128 MB 提交: 30  解决: 12 题目描述 万象城星美影院开业1周年了,要举行为期一天的大酬宾,ACM队员准备去看电影.已 ...

  4. 常用的 Nand Flash 指令如下:

    指令 功能 nand info 显示可使用的 Nand Flash nand device [dev] 显示或设定当前使用的 Nand Flash nand read  addr off  size ...

  5. 视音频编解码基本术语及解释&MediaInfo

    MEDIA INFO 下载: https://mediaarea.net/en/MediaInfo/Download/Windows 摘要:          整理了一些基本视音频术语,用于入门和查询 ...

  6. UI:网络请求

    JSON 外层是一个数组或者字典 富文本(相对来说比较安全).超文本,https安全超文本协议 NSURL NSURL *url = [[NSURL alloc]initWithString:@&qu ...

  7. ubuntu下为thunderbird添加邮件提醒功能(转载)

    转自:http://blog.csdn.net/zhangt85/article/details/9154525 1.“工具”-->“附件组件” 2.搜索“new_mail_attention” ...

  8. Taro 采坑日常

    组件事件传参只能在类作用域下的确切引用(this.handleXX || this.props.handleXX),或使用 bind. 组件中点击事件如下 // 组件 <AtListItem k ...

  9. 简单的AndroidStudio单元测试工程配置

    转载: http://www.jianshu.com/p/03118c11c199

  10. [CQOI 2006]线段树之简单题

    Description 有一个n个元素的数组,每个元素初始均为0.有m条指令,要么让其中一段连续序列数字反转--0变1,1变0(操作1),要么询问某个元素的值(操作2).例如当n=20时,10条指令如 ...