绝对定位

一、定位基本原理 对于前端开发工程师来说，编写CSS是前端开发工作中必不可少的一个内容，在CSS中的position属性又是非常重要的一个方面。顾名思义，所谓position，即是对HTML元素定位方式的一种设置。它是CSS定位技术的基石，看似很容易学习，很多的前端工程师也会说自己掌握得很好，但事实上是这样吗？作为一个在前端开发的道路上慢慢前行的新人，我不敢这么说，那么就通过这篇文章与大家一起，了解position的奥秘。 首先，既然是CSS中的属性之一，那么我们就有必要研究一下W3C的CSS文档，毕竟这才是对此属性说明最为详细的地方。在这里要插一句，目前市面上充斥着大量的教学书籍，网络上也有很多相关的学习资源，其中固然不乏精品，但是会花点时间，认真阅读官方文档的又有多少人呢，有的时候，最乏味的往往是最准确的。 好了，话不多说，官方文档中关于position属性的内容大致是这样的： In CSS 2.1, a box may be laid out according to three positioning schemes: Normal flow Floats Absolute positioning 1. 常规文档流。包括块级元素排版，行内元素排版以及对块级元素和行内元素相对位置的排版。 2. 浮动。在浮动模型中，元素先按照正常文档流定位，然后从文档流中移出

网页布局基础 简介 什么是网页布局？ 网页布局是网页制作的基础，使用DIV+CSS布局网页是基础中的基础。三种基本布局方式： 流式布局，浮动布局，绝对定位布局 。 网页设计的特点：1：网页宽度可变 2头+内容主体（根据需要分栏）+页脚（不重要的内容） 对长度设置百分比可实现网页自适应 W3C标准包括结构化标准语言，表现标准语言，行为标准语言， 倡导结构，样式，行为分离。 CSS中，存在三种定位机制：标准文档流，浮动，绝对定位。 标准文档流 ：从上到下，从左到右输出文档内容，由块级元素和行级元素组成。 浮动 ：float属性left(左浮动) right(右浮动) none(不浮动) 元素会左移或右移，直至碰到容器为止。 关于浮动的详细介绍参考我转载的《CSS浮动-float/clear》 绝对定位 ： position属性 拥有三种定位方式 1.静态定位(static) 2.相对定位(relative) 3.绝对定位(absolute fixed(固定定位)) 参考我前面的《CSS基础》有详细解释。 相对定位的特点： 1.相对自身原有位置进行偏移 2. 仍处于标准文档流中，会占据原来的空间位置 3.拥有偏移属性和z-index属性，即空间层叠现象。 绝对定位特点： 1.建立以包含块为基准的定位 2. 完全脱离了标准文档流 3.随即拥有偏移属性和z-index属性 未设置偏移量时

之前的帖子已经详细说了如何实现弹窗，但是还有一种气泡确认框也是案例中经常会使用到的，今天在这里做一下补充。气泡确认框是目标对象的操作需要用户进一步的确认时，在目标对象附近弹出浮层提示，询问用户。和之前弹窗帖子中 confirm 弹窗的全屏居中模态对话框相比，交互形式更轻量。 1.组件结构 Demo中循环创建的列一共有三个组成部分，图片组件，删除按钮组件和一个绝对定位容器。 与弹窗采用横幅组件不同，气泡确认框是用绝对定位容器来实现的。这是由于横幅的布局属性只能选择在案例中的大致位置，虽然也可以通过水平偏移和垂直偏移进行微调，但很明显在需要满足“目标对象附近弹出”这个特性要求下，横幅并不合适。 这里再提及一下绝对定位容器的特点，绝对定位容器内组件的位置只与它在绝对定位容器下的的坐标有关（绝对定位容器的左上角是(0,0)），所以我们可以不受行列的束缚，把行1拖到我们觉得合适的地方。当然，本文讲的是气泡确认框，所以我们就把行1放在按钮Delete旁边好了。（这里给绝对定位容器设置一个大小和背景颜色方便观察。黑色的小块就是绝对定位容器） 2.逻辑结构 气泡确认框在逻辑结构上与弹窗是基本一样的，例如demo中，点击Delete按钮，气泡确认框显示。点击cancel按钮则气泡确认框重新隐藏，操作取消。点击气泡确认框中的Delete按钮则从二维数组中删除当前组件对应的那一行数据

本节内容： position、 float、 clear、 浮动布局例子、 百分比宽度 position CSS中的position属性设置元素的位置。属性值：static、relative、fixed、absolute。 static static属性是默认值。任意的position:static；的元素不会被特殊的定位。一个static元素表示它不会定位，一个position属性被设置为其他值的元素表示它会被定位。 relative Relative表现的和static一样，除非添加了一些额外的属性。在一个相对定位（position属性的值为relative）的元素上设置top、right、bottom、left属性会使其偏离正常位置。 其他的元素则不会调整位置来弥补它偏移后剩下的空隙。以上两个类分别为relative1和relative2的div都设置了position:relative;属性，当relative2设置了top:-20px;时，可以看见它相对于自己原本的位置发生了改变，向上移了20个像素（因为这个值是负值，如果是正值，则向下移动20px）；后又设置了left:20px;属性（left:20px；意思是距离左边20px，而不是向左移动20px），所以该div又向右移动20px。 记住position:relative;属性如果不设置top、bottom、left

　　　　昨天早上看到了一篇很棒的文章，这篇文章将布局的一些知识点整理的很不错。我也想整理一下，这样在以后的项目中可以活学活用，避免只用一种方式。 参考文章：https://segmentfault.com/a/1190000013565024；https://segmentfault.com/a/1190000008789039#articleHeader4 　　　　前端布局是页面构建过程中很基础，很重要的一环。这里介绍一些我了解的，不足的地方大家可以补充。 　　　 一、常用的居中方法 　　　　　1、水平居中 　　　　　　　　　①如果子元素是行内元素，可以直接设置父元素使用:text-align:center的方式，使子元素水平居中； 　　　　　　　　　<div class="container"> 　　　　　　<span>css布局整理</span>　　　　　　　　　</div> 　　　　　　　　　　.container{ 　　　　　　 text-align: center; 　　　　　　　　　　} 　 ②将子元素变为行内块元素，然后设置　父元素text-align:center的方式; 　 　　　　　　　　　　优点：兼容性好，可兼容IE6/IE7 　　　　　　　　　　缺点：子元素的文字也是自动水平居中的，如果不需要文字水平居中，需要设置text-align:left/right

今天想与大家分享的ivx学习经验是关于绝对定位的使用，分析使用的依然是ivx官网的demo，绝对定位容器的使用，我认为核心在于理解绝对定位的含义，我所理解的绝对定位指的是所添加的组件在其所处的绝对定位环境中的位置，也就是坐标，是固定的，也就是这个组件位于这个绝对环境中一个固定的位置，固定它的就是它的坐标，下面我分享一下我对官网demo的分析： 1.在新版本的ivx工作台中新创的作品可以直接选择最初始的定位类型，这里选择的是绝对定位方式 2.创建新作品后我们可以看到，右边的页面和左边的组件，都是浅蓝色的，在ivx中，将相对定位的对象和组件显示为白色，而绝对定位的对象和组件显示为浅蓝色，我觉得这是ivx非常细心的地方，感受到了制作人员的呵护，十分方便我们的判断，一目了然 3.接下来我们就可以在页面下添加组件啦，我们点击组件后发现组件并没有立即出现在页面下，在绝对定位容器下添加组件时，由于没有坐标，所以无法固定这个组件，我们将鼠标放到显示区域上，然后进行拖曳，就可以将组件按照拖曳的结果，出现在容器里了 然后我们只需要做一些细微的调整，使我们的组件在我们所需要的精确坐标点和我们所需要的精准的大小就好了 4.然后我发现，在绝对容器下可以嵌套相对容器，反之亦可，比如官网demo中在绝对定位页面下添加了相对定位横幅，在这个横幅下就能添加相对定位组件啦。关于什么时候使用绝对定位

本文和大家重点讨论一下DIV+CSS之绝对定位和相对定位，在用DIV+CSS控制排版过程中，定位一直被人认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措。 　　前言 　　在用DIV+CSS控制排版过程中，定位一直被人认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措，而另一边一些高手则常常借助定位的强大功能做出些很酷的效果来，比如CSS相册等等，因此自己杂乱的网页与高手完美的设计形成鲜明对比，这在一定程度上打击了初学定位的网友，也在他们心目中形成这样的一种思想：当我熟练地玩转DIV+CSS定位时，我就已是高手了。不管你怎么想，我只希望下面的教程能让你更深入地了解CSS定位属性。 　　阅读建议 　　先说说我这篇教程的思路，这对于你在正真开始阅教程前是有很大帮助的。我的思路是这样的：先给出定位较专业化精炼的解释，接下来再用打比如的方法形象地介绍它们，此时大家要和前面讲到的专业解释对比阅读。介绍完理论，将通过实例来介绍定位的各知识点，虽然实例不美，但每一则实例都是精心挑选的，如果要完整掌握DIV+CSS定位方法，请务必弄懂每一个实例的原理。最后将会带大家做一个较为酷的综合实例。如果你想提高你阅读本文的兴趣或者动力，你可以先跳到最后看综合实例的运行效果。 　　1.定位的专业解释 　　

今天想与大家分享的ivx学习经验是关于绝对定位的使用，分析使用的依然是ivx官网的demo，绝对定位容器的使用，我认为核心在于理解绝对定位的含义，我所理解的绝对定位指的是所添加的组件在其所处的绝对定位环境中的位置，也就是坐标，是固定的，也就是这个组件位于这个绝对环境中一个固定的位置，固定它的就是它的坐标，下面我分享一下我对官网demo的分析： 1.在新版本的ivx工作台中新创的作品可以直接选择最初始的定位类型，这里选择的是绝对定位方式 2.创建新作品后我们可以看到，右边的页面和左边的组件，都是浅蓝色的，在ivx中，将相对定位的对象和组件显示为白色，而绝对定位的对象和组件显示为浅蓝色，我觉得这是ivx非常细心的地方，感受到了制作人员的呵护，十分方便我们的判断，一目了然 3.接下来我们就可以在页面下添加组件啦，我们点击组件后发现组件并没有立即出现在页面下，在绝对定位容器下添加组件时，由于没有坐标，所以无法固定这个组件，我们将鼠标放到显示区域上，然后进行拖曳，就可以将组件按照拖曳的结果，出现在容器里了 然后我们只需要做一些细微的调整，使我们的组件在我们所需要的精确坐标点和我们所需要的精准的大小就好了 4.然后我发现，在绝对容器下可以嵌套相对容器，反之亦可，比如官网demo中在绝对定位页面下添加了相对定位横幅，在这个横幅下就能添加相对定位组件啦。关于什么时候使用绝对定位

今天突然发现自己在布局的时候思路很乱，于是毅然决然的想要重新的理一下自己的布局思路，今天就先从定位开始吧~ 　　绝对定位(absolute)：将被赋予此定位方法的对象从文档流中拖出，如果对象的父级没有设置定位属性，则依据body对象左上角作为参考进行定位。绝对定位对象可层叠，层叠顺序可通过z-index属性控制，z-index值为无单位的整数，大的在最上面，可以有负值(目前负值FF不支持)。 　　　同时z-index仅能在定位元素上奏效！！！ 　　相对定位(relative)：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。 　　 2.定位的形象解释 　　我先来架设一个虚拟的场景：有一个矩形的房间，里面还有一个水桶装了些水，水里还浸泡着一个西瓜，这个房间半空中还有不少的钩子用于挂东西用。现在我把网页元素与上面物件对应上，那么房间就是一个网页，水桶是网页中的一个板块，桶中的水就是文本流，西瓜就是将要被定位的对象。 　　(1)贡献的绝对定位(absolute) 　　对照前面解释，如果西瓜被赋予绝对定位，那么就等于把西瓜从水中捞起来挂在半空中的钩子上，水桶中西瓜原来占用的空间水会自动填补它(绝对定位对象会让出自己原先占用位置，所以说它是贡献的)。此时如果之前没有对水桶进行定位设定

什么是定位？！定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置。 position 属性设置 可选值： static 默认值，元素是静止的没有开启定位 relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘滞定位 1、相对定位： 特点： 元素开启定位后不设置偏移量不会发生任何变化。 是相对于元素在文档流中的位置进行定位的。 可以提升层级，也就是可以盖住别的元素。 不会脱离文档流，也就相当于灵魂出窍，肉身还在。 不会改变元素的性质，块还是块，行内还是行内。 偏移量： top 定位元素和定位位置上边的距离 bottom 定位元素和定位位置下边的距离 left 定位元素和定位位置左边的距离 right 定位元素和定位位置右边的距离 2、绝对定位： 特点： 不设置偏移量位置还是不变。 但是，开启绝对定位后元素脱离文档流。（脱离文档流有什么特点，写在了浮动那一块了，总的来说就是不再区分块和行，宽高被内容撑开） 元素会提升一个层级。 相对于包含块定位。（绝对定位的包含块是离他最近的开启了定位的祖先元素，但要是祖先元素都没开启定位，则根元素html是它的包含块） 3、固定定位： 固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位一样，唯一不同的是固定定位永远是相对于浏览器视口进行定位的。