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. 同步 Github fork 分支

    /**************************************************************************** * 同步 Github fork 分支 * ...

  2. kafka-net

    基于kafka-net实现的可以长链接的消息生产者 今天有点时间,我就来说两句.最近接触的Kafka相关的东西要多一些,其实以前也接触过,但是在项目使用中的经验不是很多.最近公司的项目里面使用了Kaf ...

  3. c#截图工具

    厚积薄发,丰富的公用类库积累,助你高效进行系统开发(6)----全屏截图.图标获取.图片打印.页面预览截屏.图片复杂操作等 俗话说,一个好汉十个帮,众人拾柴火焰高等都说明一个道理,有更多的资源,更丰富 ...

  4. 《Deep Learning Face Attributes in the Wild》论文笔记

    论文背景: IEEE International Conference on Computer Vision 2015 Ziwei Liu1, Ping Luo1, Xiaogang Wang2, X ...

  5. FZU 2020 组合 (Lucas定理)

    题意:中文题. 析:直接运用Lucas定理即可.但是FZU好奇怪啊,我开个常数都CE,弄的工CE了十几次,在vj上还不显示. 代码如下: #pragma comment(linker, "/ ...

  6. bzoj 1600: [Usaco2008 Oct]建造栅栏【dp】

    要求三边和大于第四边,所以任意一条边的长度都是小于n/2 设f[i][j]为前i条长为j,转移的时候用n/2限制 #include<iostream> #include<cstdio ...

  7. bzoj 1179: [Apio2009]Atm【tarjan+spfa】

    明明优化了spfa还是好慢-- 因为只能取一次值,所以先tarjan缩点,把一个scc的点权和加起来作为新点的点权,然后建立新图.在新图上跑spfa最长路,最后把酒吧点的dis取个max就是答案. # ...

  8. Elasticsearch 2.3.2 安装部署

    先按照http://blog.csdn.net/love13135816/article/details/51690280这个教程安装, 不过后面的IK分词器安装部分有问题. 所以中文分词器插件的安装 ...

  9. Boost1.6x+win7+VC2015编译

    下载 通过boost官方网站, 或直接在source forge下载boost_1_6x_0. 可选包 Zlib library, 环境变量: ZLIB_SOURCE bzip2, 环境变量: BZI ...

  10. Hdu 5379 Mahjong tree (dfs + 组合数)

    题目链接: Hdu 5379 Mahjong tree 题目描述: 给出一个有n个节点的树,以节点1为根节点.问在满足兄弟节点连续 以及 子树包含节点连续 的条件下,有多少种编号方案给树上的n个点编号 ...