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

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

1.static

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

   <style>

   	    .parent{

		   background-color: red;

		   width: 100px;

		   height: 100px;

	    }

	    .static{

		   width: 50px;

		   height: 50px;

/*		   position: static;

		   top: 10px;      这段注释代码加与不加没有区别

		   left: 10px;*/

		   background: blue;

	     }

	</style>

	<div class="parent">

      	<div class="static"></div>

    </div>



chrome浏览器运行草图

2.relative

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

<style>

	.parent{

		background-color: red;

		width: 120px;

		height: 120px;

    }

    .one{

		width: 30px;

		height: 30px;

		background: green;

	}

	.two{

		width: 30px;

		height: 30px;

		background: blue;

		position: relative;

		left: 10px;

		top: 10px;

	}

    .three{

		width: 30px;

		height: 30px;

		background: yellow;

	}

</style>

<div class="parent">

    <div class="one"></div>

    <div class="two"></div>

    <div class="three"></div>

</div>

浏览器运行效果如下

3.absolute

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

或

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

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

	.parent{

		background-color: red;

		width: 120px;

		height: 120px;

		position: relative;

		/*left:0;*/

		right: 0;

	}

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

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

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

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

4.fixed

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

<style>

    body{

    	height: 2000px;

    	width: : auto;

    }

	.parent{

		background-color: red;

		width: 1360px;

		height: 50px;

		position: fixed;

		bottom: 0;

	}

</style>

<body>

	<div class="parent">

    </div>

</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. UnicodeDecodeError: 'utf-8' codec can't decode byte 0xef in position 99: invalid continuation byte

    Traceback (most recent call last): File "/Users/c2apple/PycharmProjects/easyToPython/fileMethod ...

  2. Mac下设置JAVA_HOME和MAVEN_HOME

    1.找到java安装路径 /usr/libexec/java_home 2.设置JAVA_HOME $ vim ~/.bash_profile ~/.bash_profile:每个用户都可使用该文件输 ...

  3. Windows安装TensorFlow

    1.下载安装Anaconda 官方地址:https://www.continuum.io/downloads/镜像地址:https://mirrors.tuna.tsinghua.edu.cn/ana ...

  4. SSM-Spring-07：Spring基于注解的di注入

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 注解: 说起注解,哇哦,每个人都或多或少的用到过 像什么@Overried,@Test,@Param等等之前就 ...

  5. Day4 《机器学习》第四章学习笔记

    决策树 前几天学习了<机器学习>的前三章,前三章介绍机器学习的基础知识,接下来,第四章到第十章介绍一些经典而常用的机器学习方法,这部分算是具体的应用篇,第四章介绍了一类机器学习方法——决策 ...

  6. SpringBoot vue

    springboot 整合vue就行前后端完全分离,监听器,过滤器,拦截器 https://github.com/ninuxGithub/spring-boot-vue-separateA blog ...

  7. Java 并行与并发

    Java 并行与并发 注意两个词:并行(Concurrent) 并发(Parallel) 并行:是逻辑上同时发生,指在某一个时间内同时运行多个程序 并发:是物理上同时发生,指在某一个时间点同时运行多个 ...

  8. CSS选择器详细总结

    一.基本选择器 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元 ...

  9. C++ 文件流的方式操作文件（一个简单的写入，读取）

    新手学习c++哈,归纳的写了一下以 C++ 的方式写入读取文件,读文件到控制台,并加了行号.博客记录主要为了备忘.当然 ^_^ 喜欢同学的话可以拿走代码直接用.转帖注明出处哈.欢迎讨论,我一直认为:知 ...

  10. 树莓派使用modbus与stm32通信

    树莓派+stm32开发板通信树莓派上使用java+jamod实现.jamod官网stm32使用freemodbus实现 ​