CSS之深入探究Position
这些天重新整理以前的代码，想对其进行优化，却出现了很多问题，其中一个就是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的更多相关文章
- [转载]CSS元素的定位position
CSS元素的定位position 属性position 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一 ...
- css的relative和position探究
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- CSS魔法堂：Position定位详解
一.Position各属性值详解 1. static :默认值,元素将按照正常文档流规则排列. 2. relative :相对定位,元素仍然处于正常文档流当中,但可以通过left.top. ...
- 浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- CSS绝对定位和相对定位 position: absolute/relative
absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...
- CSS学习笔记——定位position属性的学习
今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...
- 关于css float 属性以及position:absolute 的区别。
1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...
- CSS基础知识之position
最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...
随机推荐
- 如何在没有域的环境中搭建AlwaysOn（一）
对DBA而言,不需要域就可以搭建SQL Server AlwaysOn是Windows Server 2016中最令人兴奋的功能了,它不仅可以降低搭建的成本,而且还减少了部署和运维的工作量. 该特性可 ...
- SQL Agent服务无法启动如何破
问题现象 从阿里云上镜像过来的一台的数据库服务器,SQL Agent服务启动不了,提示服务启动后停止.(原数据库服务器是正常的,怀疑跟镜像有关) 如下是系统日志和SQL Agent的日志 SQLSer ...
- HTML5中类jQuery选择器querySelector的使用
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的 ...
- JavaScript面试时候的坑洼沟洄——逗号、冒号与括号
看完了javaScript数据类型和表达式与运算符相关知识后以为可以对JavaScript笔试题牛刀小试一把了,没想到有一次次的死在逗号,冒号和括号上,不得已再看看这几个符号吧. 逗号 逗号我们常见的 ...
- 【VC++技术杂谈002】打印技术之获取及设置系统默认打印机
本文主要介绍如何获取以及设置系统的默认打印机. 1.获取系统中的所有打印机 获取系统中的所有打印机可以使用EnumPrinters()函数,该函数可以枚举全部的本地.网络打印机信息.其函数原型为: B ...
- xamarin 手机顶部状态栏
修改显示xamarin开发的App的手机顶部状态栏, 步骤一:在项目UWP上的“引用”里右键“添加引用”,选择->Universal Windows->Windows Mobile Ext ...
- SQL Server数据库sql语句生成器(SqlDataToScript)的使用(sql server自增列(id)插入固定值)
SqlDataToScript是根据表数据进行生成 Insert Into语句,此工具还有一个好处是可以对自增列插入固定值,例如:自增的列id值为5,但是5这个行值已经删除,如果想存储Id自增列值为5 ...
- js创建与追加元素
用javascript创建元素 : var NewNode = document.creatElement('div'); 结合appendChild与insertBefore插入到DOM树中 ins ...
- 有吧友需要PDF的下载站点，好吧，我这边汇总一下
[经验]谈谈怎么找自己想要的资源吧~ http://www.cnblogs.com/dunitian/p/4715482.html PDF Free Computer, Programming, Ma ...
- 学用MVC4做网站六后台管理:6.1.3管理员修改密码
6.1.3修改密码 需要两个action.一个是点击修改密码的链接要显示修改密码的分部视图(对话框形式):另一个是提交的处理action. 1.打开[AdministratorController]添 ...