这些天重新整理以前的代码，想对其进行优化，却出现了很多问题，其中一个就是Position，中间自己停下优化代码的工作，特意停下来深入研究了一下Position。现在来分享一下自己的体会吧！

首先我们从定义来理解一下Position的几个属性吧

  • static 这个是容器默认值，没有定位，出现在正常文档流中。
  • absolute 这个是绝对定位，如果没有设置TRBL，则相对于父容器的左上角，如果设置了TRBL则是相对于上一个设置了absolute，relative，fixed的祖辈容器的左上角（Ps：这一点大家要注意，虽然有点绕，但是很多讲position的文章都没提到这个），可能是他的父容器，也可能是父容器的父容器，以此类推，直到找到祖辈当中有一个设置了Postion为absolute，relative，fixed的。如果找到顶层都没有，那么就是相对于文档的根元素。
  • relative相对于其正常位置进行定位，但是离开这个位置后，还是会占据原来的空间，只是我们看到的效果是移开了。
  • fixed 相对于浏览器的左上角，位置固定不变。
  • inherit 继承父元素的position。

以上是根据我自己所理解的和看的一些教程来定义的几个属性，然后我们来看一下Demo吧

这里的demo我只是举一下absolute的例子，因为fixed和relative都比较好理解，就不必多说。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title></title>

<style type="text/css">

div{border:2px red solid;}

body{background-color: #999;}

#box1{

  width: 400px;

  height: 400px;

  padding: 20px;

  background-color: #444;

  margin-left: 100px;

  margin-top: 100px;

}

#box2{

  width: 300px;

  height: 300px;

  background-color: #777;

  position: absolute;

}

</style>

</head>

<body>

<div id="box1">

	<div id="box2">

	</div>

</div>

</body>

</html>

效果

这个就是未设置TRBL时效果。接着我们设置一下TBRL来看看，更改一下代码

#box2{

  width: 300px;

  height: 300px;

  background-color: #777;

  position: absolute;

  top:50px;

  left:50px;

}

效果：

这个box2就是相对于根元素来定位的。因为它的祖辈容器中没有一个设置了postion的。接着我们在box1中添加position: relative;

#box1{

  width: 400px;

  height: 400px;

  padding: 20px;

  background-color: #444;

  margin-left: 100px;

  margin-top: 100px;

  position: relative;

}

效果：



以上三种情况就简明解释了absolute的一些特性。

接着我要说的一点就是：当一个元素被定位absolute之后，那么这个元素就算是上天了，此话怎讲，就是这个元素我们只是看得见，但是不存在于文档流中，它后面的其他元素会和它重叠，被他遮住。这一点十分重要。这也是我自己进行代码重构的时候遇到的问题。比如这样，我们把之前的代码后面添加一段文字。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title></title>

<style type="text/css">

div{border:2px red solid;}

body{background-color: #999;}

#box1{

  width: 400px;

  height: 400px;

  padding: 20px;

  background-color: #444;

  margin-left: 100px;

  margin-top: 100px;

  position: relative;

}

#box2{

	  width: 300px;

	  height: 300px;

	  background-color: #777;

	  position: absolute;

	  top:50px;

	  left:50px;

	}

</style>

</head>

<body>

<div id="box1">

	<div id="box2">

	</div>

	<p>这是一段文字，如果看不见我就说明我被遮住了，或者被遮住一部分。</p>

</div>

</body>

</html>

由此可见，这段p文字根本不受box2的影响了，就好像box2漂浮在空中一样，所以我会说它上天了。

总结：

  • postion定位有static，fixed，relative，absolute，inherit五种
  • 其中absolute最为麻烦，我们分了三种情况来讨论
  • 而absolute之所以会出现前一项的三种情况也是因为他的本质：一旦一个元素被设置为absolute的话，那么它就上天了。不存在与文档流中。

PS：我个人建议，absolute这种元素只把它用在该用的地方，不是每个定位都需要它，它会造成各种意想不到的问题。虽然好用效果好，但是对于以后的扩展性复用性就太低了。特别是当你的队友重构你的代码的时候。你就变成了坑队友了。推荐流式布局，这个其实是更为合理的。

CSS之深入探究Position的更多相关文章

  1. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

  2. css的relative和position探究

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  3. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  4. CSS魔法堂：Position定位详解

    一.Position各属性值详解   1.  static :默认值,元素将按照正常文档流规则排列.   2.  relative :相对定位,元素仍然处于正常文档流当中,但可以通过left.top. ...

  5. 浅析CSS——元素重叠及position定位的z-index顺序

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

  6. CSS绝对定位和相对定位 position: absolute/relative

    absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...

  7. CSS学习笔记——定位position属性的学习

    今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...

  8. 关于css float 属性以及position:absolute 的区别。

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...

  9. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

随机推荐

  1. CSS3 特效分解一

    先声明下,下面的特效不是我发明的,对CSS3的创造力还不够,只是看了别人demo的源码,一点一点分析出来的.整理出的笔记,分享给大家.因为源码是好,但是一头扎进去半天出不来. 首先看个登陆框,如下,相 ...

  2. 《CLR.via.C#第三版》第二部分第10，11章节读书笔记(五)

    第10章是对 属性 做阐述 属性本质上是方法 匿名类型的使用: }; Console.WriteLine("Name={0},Year={1}",o1.Name,o1.Year); ...

  3. 人人都是 DBA（XII）查询信息收集脚本汇编

    什么?有个 SQL 执行了 8 秒! 哪里出了问题?臣妾不知道啊,得找 DBA 啊. DBA 人呢?离职了!!擦!!! 程序员在无处寻求帮助时,就得想办法自救,努力让自己变成 "伪 DBA& ...

  4. Linux ls

    linux.ls linux ls命令, 我觉得是所有接触linux系统, 首先学习的命令. 这个命令, 我也早就接触过了. 只是以前是学习类型的. 学了以后, 没有做到学以致用.可惜了. 现在这篇内 ...

  5. titit. 深入理解 内聚（ Cohesion）原理and  attilax大总结

    atitit. 深入理解 内聚( Cohesion)原理and  attilax大总结         1.1. 内聚的概念 1 1.1.1. 高内聚模式关于这个问题给出的答案是:分配职责,使其可保持 ...

  6. VS2015 Enterprise 安装之惊险及收获

    前言 园子早早的就有人安装了VS 2015,自己也按捺不住了,也要赶快尝尝鲜!结果在其安装过程中一个小小的问题却困扰了我一天,这其中多亏了dudu耐心的解答才得以顺利完成,如果你也遇见这个问题,看过这 ...

  7. TextView中的部分文字响应点击事件

    TextView是android常用的控件,经常要显示不同文字的大小,颜色,......今天要实现这样这样一个需求,TextView某段内容显示的文字颜色不一样,并且点击区域只能是改变了颜色的字. 1 ...

  8. 使用maven来管理java项目

    初学maven,简单总结一下学习心得,若有不对的地方,欢迎各位大神给我指正~ 总结分为6个部分 maven概述 maven安装 maven项目结构和创建方法 maven配置文件settings.xml ...

  9. 关于Simple_html_dom的小应用

    今天一同学给我推荐了本书,说是刚出不久,内容还不错,是心灵鸡汤类的书,于是按捺不住就像在网上下一本,可是木有资源肿么办.只有在线看的,作为一个准码农,所以甭废话了,咱得用代码解决问题对吧…… 1.工欲 ...

  10. Android随笔之——Android单元测试

    在实际开发中,开发android软件的过程需要不断地进行测试.所以掌握Android的单元测试是极其重要的.您应该把单元测试作为Android应用开发周期的一部分,精心编写的测试可以在开发早起帮你发现 ...