Css定位

　　在css众多属性中，定位position属性，必须有姓名，而且占据了比较重要的地位，比如：二级，三级导航效果，鼠标悬停的一些动态效果，悬停栏，侧边导航栏定位效果等等都是需要定位实现的。

　　但是很多小伙伴，刚接触定位的时候，理解上会有一些困惑，使用上容易出bug，那我们今天就来聊一下定位position属性;

　　1、定位的历史

　　W3C(万维网联盟)组织于1998年5月发布了CSS2版本，CSS2规范在很大程度上扩展了CSS1中的内容。它包括数十种新的属性(和伪元素)，以及现有属性的很多附加值，其中就包括 定位属性。

　　2、浏览器的支持

　　所有主流浏览器都支持 position 属性。

　　3、position属性的语法

　　position 属性：规定元素的定位类型

　　属性值：

　　static：默认值。没有定位，元素出现在正常的流中。

　　relative：生成相对定位的元素，相对于其正常位置进行定位。

　　fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。

　　absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

　　sticky (css3中新增的属性值): 粘性定位，该定位基于用户滚动的位置。

　　4、定位需要配合使用的属性

　　left 属性:规定元素的左边缘偏移的大小。

　　right 属性规定元素的右边缘偏移的大小。

　　top 属性规定元素的顶部边缘偏移的大小。

　　bottom 属性规定元素的底部边缘偏移的大小。

　　以上属性用于给元素定位设置坐标点的位置;

　　属性值：

　　auto： 默认值。通过浏览器计算左边缘的位置。

　　%： 设置以包含元素的百分比计的左边位置。可使用负值。

　　length： 使用 px、cm 等单位设置元素的左边位置。可使用负值。

　　5、了解编程中的坐标

　　· 编程中的坐标，x轴-水平轴右为正，左为负，Y轴-垂直轴下为正，上为负

　　· 每个元素都自带一个坐标系，元素左上角的位置为原点(0)位置，如下图所示

　　6、 分别介绍定位属性每个属性值的使用语法

　　· position:static 静态定位

　　position属性的默认值，即没有定位，遵循正常的文档流对象。

　　遵循正常的文档流对象，可以理解为，元素的位置根据在html中的书写顺序依次排序显示，没有特殊的位置改变

　　· position:relative 相对定位

　　生成相对定位的元素，相对于其正常位置进行定位。

　　基本使用讲解：

　　例如：一个img元素在没有设置定位时，正常显示在浏览器中，自带坐标系，

　　如图显示;

　　给img元素设置相对定位，设置定位的坐标为(100px,100px)，美女的位置会从原本原点的位置移动到(100px,100px)的位置，会发生如下变化：

　　代码实现如下：

　　相对定位对元素在文档流中的影响

　　元素仍然保持其未定位前的形状，它原本在文本流中所占的空间仍保留

　　例如：在img标签下面书写一个span标签，img在定位之后，原本的位置空间依旧是保留在文本流中的，写在img下面的span是没有上去的;

　　代码实现如下：

　　效果如下：

　　· position: absolute 绝对定位

　　生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

　　解释：指绝对定位元素会根据有定位设置(除static定位)的父元素作为参照进行定位;如果父元素没有定位设置，那就继续向上找祖父元素，看是否有定位设置，有的话就根据祖父元素定位，没有的话，那就继续向上找…….如果都没有，就根据html进行定位。

　　包含块：绝对定位元素参照的有定位设置的父元素我们称为包含块，包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标偏移和显示范围的参照物;

　　设置某个元素为包含块：给此元素添加relative，fixed，absolute都可，推荐使用relative，因为不会影响元素在文本流中的显示;

　　总结元素绝对定位三部曲：

　　· 先确定其包含块

　　· 设置元素绝对定位

　　· 定位的位置

　　基本使用讲解：

　　例如：img元素放在div中，没有设置定位效果

　　代码实现如下：

　　HTML:

　　CSS：

　　div {

　　width: 400px;

　　height: 400px;

　　border: 10px dashed coral;

　　margin: 100px;

　　}

　　显示效果如下：

　　然后给图片设置绝对定位，代码如下：

　　img {

　　position: absolute;

　　left: 0;

　　top: 0;

　　}

　　分析：img的父元素是div，从上述代码中，可以看出div没有定位设置，不能作为img的包含块，一依次向上是body，body也没有定位设置，再向上就是html，所以img会根据html进行定位，定位到离包含块左边0，上边0的位置定位，也就是左上角位置;

　　效果如下：

　　如果想让img根据div盒子进行定位，div需要有除static之外的定位设置;成为一个包含块，代码如下：

　　div {

　　width: 400px;

　　height: 400px;

　　border: 10px dashed coral;

　　margin: 100px;

　　/* position:absolute relative fixed都可以让一个元素成为包含块 */

　　position: absolute;

　　}

　　img {

　　position: absolute;

　　left: 100px;

　　top: 100px;

　　}

　　效果如下：

　　绝对定位对元素在文档流中的影响

　　给元素设置绝对定位之后，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样;

　　例如：在img下面添加了一个p标签，并且没有给img设置绝对定位，此时img和p会根据书写顺序，从上向下依次显示，代码如下：

　　Html：

　　Css：

　　* {

　　margin: 0;

　　padding: 0;

　　}

　　div {

　　width: 400px;

　　height: 400px;

　　border: 10px dashed coral;

　　margin: 100px;

　　}

　　p {

　　background: lemonchiffon;

　　}

　　效果如下：

　　当给img设置绝对定位之后，img在正常文档流中所占的空间会关闭，img不在占据原来的空间;p标签就会当img不存在一样，显示在div最开始的位置：

　　代码如下：

　　Html：

　　Css：

　　* {

　　margin: 0;

　　padding: 0;

　　}

　　div {

　　width: 400px;

　　height: 400px;

　　border: 10px dashed coral;

　　margin: 100px;

　　/* position:absolute relative fixed都可以让一个元素成为包含块 */

　　position: relative;

　　}

　　img {

　　position: absolute;

　　left: 100px;

　　top: 100px;

　　}

　　p {

　　background: lemonchiffon;

　　}

　　效果如下：

　　· 固定定位 position:fixed

　　生成固定定位的元素，相对于浏览器窗口进行定位。

　　基本使用讲解

　　元素设置固定定位之后，相对窗口进行定位，不会根据浏览器滚动条的滚动而移动位置，代码如下：

　　结构：内容比较多,让浏览器可以出现滚动条

　　效果如下：

　　给图片添加固定定位;代码如下：

　　效果如下：

　　固定定位对元素在文档流中的影响

　　给元素设置固定定位之后，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样(参照上图看效果);

　　sticky 粘性定位

　　css3中新增的属性值，有兼容问题，ie低版本浏览器不支持

　　粘性定位，元素在浏览器范围内定位时就像 position:relative; 而当页面滚动超出目标区域时，它的定位效果就像 position:fixed;，它会固定在目标位置。

　　基本语法讲解

　　例如：给img元素设置粘性定位，代码如下：

　　css代码：

　　效果如下：

　　元素设置绝对定位、固定定位后，会生成一个块级框，而不论原来它在正常流中生成何种类型的框。

　　例如： span默认为行内元素，给其设置绝对定位，观察其生成的块级框效果，代码如下：

　　Html：

　　Css：

　　效果如下：

　　以上是对position属性语法的基本讲解，其实position在实际开发中，有很多灵活的使用方式，下次我们写一个比较有趣的案例，给大家展示定位在实际项目中的灵活应用。