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. Why Do Microservices Need an API Gateway?

    Why Do Microservices Need an API Gateway? - DZone Integration https://dzone.com/articles/why-do-micr ...

  2. docker启动centos容器后如何用putty连接

    在前面的文章中,我提到过,win10 docker启动容器时,只有配置了宿主机和docker容器的端口映射,外部应用才能访问到容器中的服务,比如映射到Nginx的80端口.现在我将宿主机的某个端口映射 ...

  3. 构造json参数时key的引号和js string转json的三种方式

    {name:"dd",age:"16"} {"name":"dd","age":"16&q ...

  4. sphinx索引部分源码续——过程:连接到CSphSource对应的sql数据源,通过fetch row取其中一行,然后解析出field,分词,获得wordhit,最后再加入到CSphSource的Hits里

    后面就是初始化一些存储结构,其中重点说下缓存出来的几个临时文件分别的作用.结尾时tmp0的存储的是被上锁的Index,有些Index正在被查询使用 故上锁.tmp1,即对应将来生成的spp文件,存储词 ...

  5. 并不对劲的trie树

    听上去像是破坏植物的暴力行为(并不). 可以快速查询某个字符串在某个字符串集中出现了几次,而且听上去比字符串哈希靠谱. 把整个字符串集建成树,边权是字符,对于字符串结尾的节点进行特殊标记. 这样一方面 ...

  6. BZOJ_3209_花神的数论题_组合数+数位DP

    BZOJ_3209_花神的数论题_组合数+数位DP Description 背景 众所周知,花神多年来凭借无边的神力狂虐各大 OJ.OI.CF.TC …… 当然也包括 CH 啦. 描述 话说花神这天又 ...

  7. excel+requests管理测试用例接口自动化框架

    背景: 某项目有多个接口,之前使用的unittest框架来管理测试用例,将每个接口的用例封装成一个py文件,接口有数据或者字段变动后,需要去每个py文件中找出变动的接口测试用例,维护起来不方便,为了便 ...

  8. 无参数的lambda匿名函数

    lambda 语法: lambda [arg1[,arg2,arg3....argN]]:expression 1.单个参数的: g = lambda x:x*2 print g(3) 结果是6 2. ...

  9. 小程序-demo:妹纸图

    ylbtech-小程序-demo:妹纸图 1.返回顶部 0.     1.app.js //app.js App({ onLaunch: function () { //调用API从本地缓存中获取数据 ...

  10. 使用Asp.net Identity 创建用户 、登录代码

    1.Identity 1中的注册.登录.注销代码 vs 2013中自带的注册用户代码: 1.首先创建一个ApplicationUser 初始化用户名. 2.使用UserManager创建一个用户,用使 ...