第十八章 定位

第146课 定位

1、定位流分类

1.1相对定位
1.2绝对定位
1.3固定定位
1.4静态定位

相对定位：相对于自己以前在标准流中的位置来移动

{
  position:relative;
  top:20px;
  //left right bottom
}

相对定位是不脱离标准流的，会继续在标准流中的占用一份空间

第147课 相对定位注意点

1、相对定位是不脱离标准流的，会继续在标准流中的占用一份空间
2、在相对定位中同一个方向上的定位属性只能使用一个
3、由于相对定位是不脱离标准流，所以在相对定位中是区分 块级元素／行内元素／行内块级元素

4、由于相对定位是不脱离标准流，并且相对于定位元素会占用标准流中的位置，
所以当给相对定位的元素设置margin／padding等属性时会影响标准流的布局
也就是margin／padding会在未发生相对定位的位置添加，
同时相对定位会在添加margin／padding后重新定位

相对定位应用场景

1、用于对元素进行微调
2、配合后面学习的绝对定位来使用

第148课 绝对定位

绝对定位：相对于body来定位

{
  position: absolute;
  top: 0px;
  right: 0px;
}

注意点：

1、绝对定位的元素是脱离标准流的
2、绝对定位的元素是不区分块级元素／行内块级元素／行内元素的，均可设置width、height

第149课 绝对定位参考点

规律

1、默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考点
2、如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，
那么这个绝对定位就会以定位流的那个祖先元素作为参考点
2.1只要是这个绝对定位元素的祖先元素都可以
2.2指定的定位流包含：相对定位／绝对定位／固定定位，不包含静态定位
2.3就近元素作为参考点

第150课 绝对定位注意点

1、如果一个绝对定位的元素是以body作为参考点，那么其实是以网页屏幕的宽高作为参考点，
而不是以整个网页的宽度和高度作为参考点
2、一个绝对定位的元素会忽略祖先元素的padding

第151课 绝对定位子绝父相

相对定位弊端：不会脱离标准流，会继续在标准流中占用一份空间，所以不利于布局界面
绝对定位弊端：默认情况下绝对定位的元素会以body作为参考点，
所以会随着浏览器屏幕的宽高的变化而变化

避免两者弊端，标签处添加小标

子绝父相：子元素用绝对定位，父元素用相对定位

第152课 绝对定位-水平居中

1、只需要设置绝对定位元素的left：50%；
2、设置绝对定位元素的margin-left：负的绝对定位元素的宽度的一半

第153课 定位练习-团购界面

0 = 0px 当值为0时，可以省略px
当一个元素盖在另一个元素上，一定要想到定位流，同时想到子绝父相
当用到精灵图时，选择作为背景图片

第154课 定位练习-焦点图

一个练习

第155课 定位流-固定定位

固定定位和背景关联方式很像，

背景定位可以让背景图片不随着滚动条的滚动而滚动,background-attachment: fixed;
而固定定位可以让某个盒子不随着滚动条的滚动而滚动,position:fixed;

注意点：

1、固定定位的元素是脱离标准流的，不会占用标准流中的空间
2、固定定位和绝对定位一样不区分行内元素／块级元素／行内块级元素

第156课 定位练习-新浪首页

图片堆积而成，没有图片使用自己图片代替

第157课 定位流-z-index 属性

1、IE浏览器不支持默认定位
2、一个元素默认情况下就是静态定位
3、z-index
默认情况下所有的元素都有一个默认的z-index属性，取值是0.
z-index属性的作用是专门用于控制定位流元素的覆盖关系的

1、默认情况下定位流的元素会盖住标准流的元素
2、默认情况下定位流的元素后面编写的会盖住前面编写的
3、如果定位流的元素设置了z-index属性，那么谁的z-index属性比较大，谁就显示在上面

注意点
从父现象

1、如果两个元素的父元素都没有设置z-index属性，
那么谁的z-index属性比较大谁就显示在上面
2、如果两个元素的父元素设置了z-index属性，谁的父元素的z-index属性比较大谁就显示在上面

内容参考