理解css之position属性
之前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;
}
这两图说明绿色（.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属性的更多相关文章
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- 深入理解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 ...
- 转：深入理解css中position属性及z-index属性
原文链接:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种 ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- css中position属性(absolute|relative|static|fixed)概述及应用
position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...
- 【转】CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- 理解 CSS 的 z-index 属性
通常认为HTML页面是二维的,但实际上,CSS还有一个z-index属性,允许层叠元素. 所有的盒模型元素都处于三维坐标系中. 除了我们常用的横坐标和纵坐标, 盒模型元素还可以沿着“z轴”层叠摆放, ...
随机推荐
- 在C++98基础上学习C++11新特性
自己一直用的是C++98规范来编程,对于C++11只闻其名却没用过其特性.近期因为工作的需要,需要掌握C++11的一些特性,所以查阅了一些C++11资料.因为自己有C++98的基础,所以从C++98过 ...
- bugku login2 writeup 不使用vps的方法
0x00前言 这个题是sql注入与命令执行相结合的一个题,思路有两个: 一.:sql注入登录web系统,命令执行反弹公网IP监听端口(需要vps),此种方法详见链接:http://www.bugku. ...
- PAT1101:Quick Sort
1101. Quick Sort (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CAO, Peng There is a ...
- CentOS7 安装 MySQL
一.首先检查 MySQL 是否已安装 yum list installed | grep mysql 如果有的话 就全部卸载 yum -y remove +数据库名称 二.MySQL 依赖 libai ...
- linux常用的时间获取函数（time，gettimeofday，clock_gettime，_ftime，localtime，strftime ）
time()提供了秒级的精确度 1.头文件 <time.h> 2.函数原型 time_t time(time_t * timer) 函数返回从TC1970-1-1 0:0:0开始到现在的秒 ...
- ASP.NET Core & Docker 实战经验分享
一.前言 最近一直在研究和实践ASP.NET Core.Docker.持续集成.在ASP.NET Core 和 Dcoker结合下遇到了一些坑,在此记录和分享,希望对大家有一些帮助. 二.中间镜像 我 ...
- Java 精简Jre jar打包成exe
#开始 最近几天都在忙一个事情,那就是尝试精简jre,我想不明白为什么甲骨文官方不出exe打包工具... 网络上精简jre的文章很多,但是原创的似乎没几个,绝大多数都是转发同一个博客, 这里借鉴了不少 ...
- APNS导致消息丢失和发送效率原因
http://blog.csdn.net/tlq1988/article/details/9612237 首先说明一下,本文只是介绍一些容易被开发者忽视,而导致性能低下问题.并不是介绍如何向苹果设备成 ...
- 如何将数据库中存的树转化为树形列表(以easyui的tree为例)
很多时候,我们会把一棵树存放到数据库中,当前台需要展示一个树形列表时,将这棵树读取出来并显示,这个过程是怎么实现的呢? 这篇文章是以构造一棵easyui前台框架的一个树形列表为例,后台框架是sprin ...
- Java 开发， volatile 你必须了解一下
上一篇文章说了 CAS 原理,其中说到了 Atomic* 类,他们实现原子操作的机制就依靠了 volatile 的内存可见性特性.如果还不了解 CAS 和 Atomic*,建议看一下我们说的 CAS ...