之前css学的一直不精致而且没有细节，为了成为一个完美的前端工作人员，所以决定重新学习css的属性。当然会借鉴MDZ文档（MDZ文档）或其他博主的经验来总结。在这里会注明借鉴或引用文章的出处。侵权即删。

position属性值包括 static，relative，absolute，fixed，sticky（实验属性）5种。

1.static

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时设置 top, right, bottom, left 和 z-index 属性无效

  1.    <style>
  2.    	    .parent{
  3. 		   background-color: red;
  4. 		   width: 100px;
  5. 		   height: 100px;
  6. 	    }
  7. 	    .static{
  8. 		   width: 50px;
  9. 		   height: 50px;
  10. /*		   position: static;
  11. 		   top: 10px;      这段注释代码加与不加没有区别
  12. 		   left: 10px;*/
  13. 		   background: blue;
  15. 	     }
  16. 	</style>
  17. 	<div class="parent">
  18.       	<div class="static"></div>
  19.     </div>



chrome浏览器运行草图

2.relative

该关键字指定元素 即在不改变页面布局的前提下相对于自身原来位置调整元素位置（原来位置仍然保留）。position: relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效

  1. <style>
  2. 	.parent{
  3. 		background-color: red;
  4. 		width: 120px;
  5. 		height: 120px;
  6.     }
  7.     .one{
  8. 		width: 30px;
  9. 		height: 30px;
  10. 		background: green;
  12. 	}
  13. 	.two{
  14. 		width: 30px;
  15. 		height: 30px;
  16. 		background: blue;
  17. 		position: relative;
  18. 		left: 10px;
  19. 		top: 10px;
  20. 	}
  21.     .three{
  22. 		width: 30px;
  23. 		height: 30px;
  24. 		background: yellow;
  25. 	}
  27. </style>
  28. <div class="parent">
  29.     <div class="one"></div>
  30.     <div class="two"></div>
  31.     <div class="three"></div>
  32. </div>

浏览器运行效果如下

3.absolute

不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

或

此时绿色方块平移，而原来位置不再保留，其相邻元素填充它原来位置并且是相对于html移动，脱离文档流。

假如修改.parent代码添加 position：relative。

  1. 	.parent{
  2. 		background-color: red;
  3. 		width: 120px;
  4. 		height: 120px;
  5. 		position: relative;
  6. 		/*left:0;*/
  7. 		right: 0;
  8. 	}

left:0；（绿色方块覆盖蓝色 ）

right：0；（绿色方块相对于红色方块平移）

这两图说明绿色（.one）相对于父元素移动.

即 相对于 最近的 非 static 定位祖先元素的偏移，来确定元素位置

4.fixed

不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

  1. <style>
  2.     body{
  3.     	height: 2000px;
  4.     	width: : auto;
  5.     }
  6. 	.parent{
  7. 		background-color: red;
  8. 		width: 1360px;
  9. 		height: 50px;
  10. 		position: fixed;
  11. 		bottom: 0;
  12. 	}
  13. </style>
  14. <body>
  15. 	<div class="parent">
  16.     </div>
  17. </body>



即 在滚动界面时 div.parent 始终 固定在页面底部

5.sticky

盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同

这个不大好演示请大家看文档 sticky效果图

本文同时借鉴了 Wayne Zhu 的文章

理解css之position属性的更多相关文章

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

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

  2. 深入理解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 ...

  3. 转：深入理解css中position属性及z-index属性

    原文链接:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种 ...

  4. CSS中Position属性

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

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

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

  6. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  7. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  8. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  9. 理解 CSS 的 z-index 属性

    通常认为HTML页面是二维的,但实际上,CSS还有一个z-index属性,允许层叠元素. 所有的盒模型元素都处于三维坐标系中. 除了我们常用的横坐标和纵坐标, 盒模型元素还可以沿着“z轴”层叠摆放, ...

随机推荐

  1. URL 规范 整理

    URL 规范 不用大写:(强制) 用中杠-不用下杠_:(强制) 参数列表要encode,编码使用utf-8:(强制) URI中的名词表示资源集合,使用复数形式.(建议) 增加版本号(建议) URI中统 ...

  2. .NET开发微信小程序-获取OpenId

    注:获取当前用户信息只需要用GetUserInfo这个方法就行.这里就不需要提了 前端代码: CallBack:回调函数 function GetOpenID(CallBack){ var appIn ...

  3. github routine

    1. 从官方库fork 自己的分支库后,git clone到local. 2. local的remotes/origin默认是自己的分支库.可以添加remotes/upstream指向官方库. 3. ...

  4. 【转】mysql索引使用技巧及注意事项

    一.索引的作用 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,所以查询语句的优化显然是重中之重. 在数据 ...

  5. springboot之启动原理解析

    前言 SpringBoot为我们做的自动配置,确实方便快捷,但是对于新手来说,如果不大懂SpringBoot内部启动原理,以后难免会吃亏.所以这次博主就跟你们一起一步步揭开SpringBoot的神秘面 ...

  6. mybatis延迟加载详解

    http://www.cnblogs.com/selene/p/4631244.html http://blog.csdn.net/eson_15/article/details/51668523

  7. Java NIO核心组件简介

    原文链接:http://tutorials.jenkov.com/java-nio/overview.html NIO包含下面几个核心的组件: Channels Buffer Selector 整个N ...

  8. Centos下的apache2练习

    前言: 我上星期一直在写代码忘记写博客了,明天回去补回来.脚本主要用于收集信息 今天刚刚学完apache.来做个总结,写的不好请多多指指出. 目标: Centos6.5的IP:192.168.1.21 ...

  9. HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...

  10. Jenkins持续集成项目搭建与实践——基于Python Selenium自动化测试（自由风格）

    Jenkins简介 Jenkins是Java编写的非常流行的持续集成(CI)服务,起源于Hudson项目.所以Jenkins和Hudson功能相似. Jenkins支持各种版本的控制工具,如CVS.S ...