这些天重新整理以前的代码，想对其进行优化，却出现了很多问题，其中一个就是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. 依赖倒置（DIP）与依赖注入（DI）

    依赖倒置原则(Dependency Inversion Principle)为我们提供了降低模块间耦合度的一种思路,依赖注入(Dependency Injection)是一种具体的实施方法. 依赖倒置 ...

  2. UWP开发之控件：用WebView做聊天框

    目录 说明 WebView存在的价值 使用WebView的几个重要技巧 使用WebView做的聊天框 说明 大家都知道,无论是之前的Winform.WPF还是现在的IOS.Android开发中,都存在 ...

  3. AutoMapper使用手册(一)

    阅读目录 1. 介绍 2. 基本使用 3. 自动分割映射(Flattening) 4. 自定义字段映射(Projection) 5. 验证配置(Configuration validation) 介绍 ...

  4. 磁盘分区在windows和linux下的表现形式对比

    写在前面的话:磁盘分区在windows下面比较好理解,在linux下会有挂载的概念,理解起来比较难,但是可以通过与windows对比,以一种通俗的方式将他们梳理清楚. ====正文开始==== 我们的 ...

  5. 老司机学新平台 - Xamarin Forms开发框架二探 (Prism vs MvvmCross)

    在上一篇Xamarin开发环境及开发框架初探中,曾简单提到MvvmCross这个Xamarin下的开发框架.最近又评估了一些别的,发现老牌Mvvm框架Prism现在也支持Xamarin Forms了, ...

  6. java spring 邮件发送

    开发中经常会遇到发送邮件进行用户验证,或者其它推送信息的情况,本文基于spring,完成邮件的发送,主要支持普通文本邮件的发送,html文本邮件的发送,带附件的邮件发送,没有实现群发.多个附件发送等需 ...

  7. FPGrowth算法总结复习

    摘要: 1.算法概述 2.算法推导 3.算法特性及优缺点 4.注意事项 5.实现和具体例子 6.适用场合 内容: 1.算法概述 关联规则(associatio rules):从大规模数据集中寻找物品建 ...

  8. 网页webp转非webp的jpg gif png 图片

    webp 谷歌提出的一种图片格式.支持动图: gif静图: png jpg 网页 webp / jpg / gif / png 图片提取. 已在微信.淘宝.京东.一号店上测试通过. 如果电脑上有 ch ...

  9. is_null, empty, isset, unset对比

    is_null, empty, isset, unset 我们先来看看这4个函数的描述 isset 判断变量是否已存在(配置)unset 把变量删除(释放)掉empty 判断变量是否为空is_null ...

  10. SQLServer比较两条数据是否相同

    SQLServer比较两条数据是否相同 直接比较可能会一个一个字段的比较,也可以将多个字段拼成一个串然后比较,这里有个hash值比较的方法,很好用 用法 将需要的比较的column放进去,逗号隔开,只 ...