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. 2016/2/26 <marquee></marquee>实现多种滚动效果

    页面的自动滚动效果,可由javascript来实现,但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标记 ...

  2. MongoDB相关的一些技术文章

    安装 win7下安装和配置MongoDB的总结---阿冬专栏

  3. ubuntu mysql5.7源码安装

    本系列的lnmp的大框架基本上是按照http://www.linuxzen.com/lnmphuan-jing-da-jian-wan-quan-shou-ce-si-lnmpda-jian-yuan ...

  4. AngularJS 指令(Directives)实践指南

    指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令.这篇教程会为你讲述如何自定义指令,以及介绍如何在 ...

  5. I.MX6 dhcpcd 需要指定网卡

    /************************************************************************** * I.MX6 dhcpcd 需要指定网卡 * ...

  6. 【HAOI 2015】 树上操作

    [题目链接] 点击打开链接 [算法] 树链剖分 子树的DFS序是连续的一段! [代码] #include<bits/stdc++.h> using namespace std; #defi ...

  7. Spark 大数据文本统计

    此程序功能: 1.完成对10.4G.csv文件各个元素频率的统计 2.获得最大的统计个数 3.对获取到的统计个数进行降序排列 4.对各个元素出现次数频率的统计 import org.apache.sp ...

  8. 从事UNIX/LInux服务器编程最方便的代码编译工具------(eclipse for c/c++)、(FileZilla)、(Secure CRT) 这三种一定要一起使用 之1

    今天主要是将前几天搞的Linux学习的心得写出来,希望帮助更多的人进行,方便从事Unix和Linux编程的同行和刚入门者.主要介绍三种工具并给出安装过程,请大家不必怀疑这个博文,此博文是我自己原创.请 ...

  9. HDU 5912 Fraction (模拟)

    题意:给定一个分式,让你化简. 析:从分母开始模拟分数的算法,最后约分. 代码如下: #pragma comment(linker, "/STACK:1024000000,102400000 ...

  10. ubuntu 怎么格式化U盘?(转载)

    转自:http://3168247.blog.51cto.com/3158247/605654 图形的话装一个gparted,找那个/dev/sdb,右击选择格式化,最后点“应用”.命令行:原则是先卸 ...