position:relative/absolute/fixed/static  ......

relative:相对定位。 脱离标准流,相对自己原来(标准流)的位置定位。
absolute:绝对定位。 脱标不占位,相对body定位、子绝父相、......
fixed:相对于窗口定位。固定定位。
static:默认值。无特殊定位,对象遵循标准流。

实例-在窗口中垂直居中定位:

div{
  width:500px;
  height:500px;
  position:fixed;
  left:50%;
  margin-left:-250px; //(负的宽度的一半)
  top:50%;
  margin-top:-250px;
}

在CSS中关于position定位的内容:
position: relative | absolute | static | fixed

static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
fixed(固定定位)这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

CSS中定位的层叠分级:z-index: auto | namber;
auto 遵从其父对象的定位
namber 无单位的整数值。可为负数

relative(相对定位)只可以在文本流中进行位置的上下左右的移动,虽然他的表现区脱离了文本流,但是在文本流却依然为其保留了一席之地,这就好比一个打工的人他到了外地,但是在老家依然有一个专属于他的位置,这个位置不随他的移动而改变。这样很明显就会空出一块空白来,如果希望文本流抛弃这个部分就需要用到绝对定位。

absolute(绝对定位)不光脱离了文本流,而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位,如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL(TOP、RIGHT、BOTTOM、LEFT简称TRBL)来设置元素,使之处在任何一个位置。在父层position属性为默认值时,TRBL的坐标原点以body的坐标原点为起始。

关于position:

1. position:static
所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。
一般来说,不用指定 position:static,除非想要覆盖之前设置的定位(也就是说,不继承父容器的position属性值!!!)。

2. position:relative
如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。
意思是元素实际上依然占据文档中的原有位置,只是上相对于它在文档中的原有位置移动了。

3. position:absolute
当指定 position:absolute 时,元素就脱离了文档(即在文档中已经不占据位置了),可以准确的按照设置的 top,bottom,left 和 right 来定位了。

4. position:inherit (值)属性:
inherit故名思意是“继承”的意思。所以它所表达的值也是继承相关的了。
通过在特定元素上设置某些样式来告诉该元素 “继承”它父级元素的所有已添加的属性,这样你就可以避免相当多的键盘输入。
  这可以通过设置 inherit 来很容易的实现。比如,当重写 background 属性的时候,常常会有很多的文字在该属性中(色彩、图片的URL地址、位置等)。所以,与其重新写这些值,你可能仅仅想要考虑中的元素和其父级元素有相同 的背景属性,一个 inherit 值就可以搞定一切——这显然大大的节省了键盘输入。

很可惜的是inherit 值在IE6和IE7不被支持(除了用于 direction (文字方向) 和 visibility 属性)。

关于position的小总结的更多相关文章

  1. Python - requests发送请求报错:UnicodeEncodeError: 'latin-1' codec can't encode characters in position 13-14: 小明 is not valid Latin-1. Use body.encode('utf-8') if you want to send it encoded in UTF-8.

    背景 在做接口自动化的时候,Excel作为数据驱动,里面存了中文,通过第三方库读取中文当请求参数传入 requests.post() 里面,就会报错 UnicodeEncodeError: 'lati ...

  2. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  3. 装载:对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  4. 微信小程序相关三、css写小黄人

    小程序上课第三天,因为今天院里有活动,所以没去上课,第四天上午又因为要召开入党转正大会,又耽误了一上午,下午去上课,要了资料.这两天讲了一些零零碎碎的东西,做的实例有上面这个小黄人 都是用的css,基 ...

  5. css position float (写的相当好)

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  6. 【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框

    在网页中,常常会用到各种Icon,假设老是麻烦设计狮画出来不免有些不好意思,所以有时候我们也能够用CSS写出各种简单的形状.一来能够减轻他们的负担,二来也能够使用CSS替代图片.提高载入速度. 在网页 ...

  7. CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Android之自定义ViewPager实现图片的无线轮播

    PS:以前也写过关于图片轮播这一块的博客.不过写的很烂,并且很多情况没有考虑到(没有支持无线轮播,和手势点击事件).因此这里写一篇补上.也是当时太年轻了. 注:图片请放大后再看.否则看不清楚. 学习内 ...

  9. 使用viewpager实现广告条轮询的效果

    先上效果图: viewpager是google在v4-support包中提供的,使用时与listview类似,度需要提供一个adapter, 只不过viewpager提供的是PagerAdapter ...

随机推荐

  1. [python测试框架] http接口测试框架

    https://testerhome.com/topics/5631 Http 接口测试框架 (思路 + 实现中 + 开源 + 可能难产) Http 接口测试框架疑问解答 Fiddler 保存会话 ( ...

  2. 【转】Unicode utf8等编码类型的原理

    原文地址http://www.cnblogs.com/daxiong2014/p/4768681.html Unicode utf8等编码类型的原理 1.ASCII码  我们知道,在计算机内部,所有的 ...

  3. 通过FEDERATED存储引擎同步两实例间的表数据

    需求情景:实例1中A库中的三个视图是实例2中的B库所依赖的,B需要A库中三个视图的实时数据. 方案:通过FEDERATED来完成跨势力的查询FEDERATED存储引擎表只会创建表结构,不会存储表数据, ...

  4. 【bzoj2400】Spoj 839 Optimal Marks 网络流最小割

    题目描述 定义无向图中的一条边的值为:这条边连接的两个点的值的异或值. 定义一个无向图的值为:这个无向图所有边的值的和. 给你一个有n个结点m条边的无向图.其中的一些点的值是给定的,而其余的点的值由你 ...

  5. 【Luogu】P3358最长k可重区间集问题(费用流)

    题目链接 这题费用瘤,数据貌似还是错的. 把线段抽象抽象拆成两个点,入点表示左端,出点表示右端,连上容量为1费用-长度的边. 不相交线段随便连下,源点向拆出的原点S'连费用为0容量k,然后跑费用流. ...

  6. HDU——2067小兔的棋盘(卡特兰数&递推DP)

    小兔的棋盘 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  7. 深入理解Java中的volatile关键字

    在再有人问你Java内存模型是什么,就把这篇文章发给他中我们曾经介绍过,Java语言为了解决并发编程中存在的原子性.可见性和有序性问题,提供了一系列和并发处理相关的关键字,比如synchronized ...

  8. 洛谷 P3391 模板Splay

    #include<bits/stdc++.h> using namespace std; #define maxn 200000 int read() { ,w=; ;ch=getchar ...

  9. 写论文,关于word的技巧

    当段落的行间距为固定值的时候,图片会出现显示不全的情况,将行间距先改了再插入图片就没问题了. 从引用那边自动添加目录. ctrl+H打开可以使用通配符,改变字母或者数字的样式等

  10. SPOJ QTREE3 - Query on a tree again!

    You are given a tree (an acyclic undirected connected graph) with N nodes. The tree nodes are number ...