08css属性——position和层叠

cursor

cursor可以设置鼠标指针（光标）在元素上面时的显示样式
可以设置以下样式

• auto:浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
• default：由操作系统决定，就是一个小箭头
• pointer：一只小手，鼠标移动到链接上面默认的就是这个样式
• text：一条竖线，鼠标挪动到文本输入框上面默认就是这个样式
• none：没有任何指针显示在元素上面

标准流（normal flow）

• 默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流）进行排布
• 从左到右、从上到下按顺序摆放好
• 默认情况下，互相之间不存在层叠现象

margin、padding定位

• 在标准流中，可以使用margin、padding对元素进行定位
• 其中margin还可以设置负数
• 比较明显的缺点是
  • 设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
  • 不便于实现元素层叠效果

position

利用position可以对元素进行定位，常取的值有四个

• static：静态定位（按标准流进行排布，设置top、left没有意义）
• relative：相对定位（可重叠），在不影响其他元素位置的前提下，对当前元素位置进行微调
• absolut：绝对定位
  • 元素脱离normal flow
  • 可以通过left、right、top、bottom进行定位
  • 参照对象是最邻近的定位祖先元素
• fixed：固定定位
  • 元素脱离normal flow（脱离标准流）
  • 可以通过left、right、top、bottom进行定位
  • 参照对象是视口（viewport）
  • 当画布滚动时，固定不动

绝对定位的技巧（absolute position element）

position值为absolute或者fixed的元素

• 定位参照对象的宽度=left+right+margin-left+ margin-right+绝对定位元素的实际占用宽度
• 定位参照对象的宽度=top+bottom+margin-top+ margin-bottom+绝对定位元素的实际占用宽度
• 如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性
  left:0、right:0、top:0、bottom:0、margin:0
• 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性

/* 1.让子元素完全占据父元素 */
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
/* 2.让内容居中 */
		width: 100px;
		height: 100px;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto auto;

脱标元素的特点（fixed、absolut、float）、

• 可以随意设置宽度和高度

• 宽高默认由内容决定的

• 不受标准流的约束

• 不再给父元素汇报宽高数据（相当于这个元素不存在，后面的东西会重叠上来）

• 脱离标准流后的元素display为block

• 与父元素对齐的方法

	left: 0;//与父元素最左边位置相对其
	transform:translate(-50%);//相对自己的位置左移50%
	margin-left: 50%;//相对于父元素右移50%

	left: -90px;//通过计算左移自己的一半
	/*相对父元素的一半*/
	margin-left: 50%;

元素的层叠

z-index属性

用来设置定位元素的层叠顺序（仅对定位元素有效）

父子关系	子元素会层叠在父元素上
非父子元素	都是定位元素	在标准流中一般不存在层叠现象
-	1个是定位元素，1个是非定位元素	定位元素会层叠在非定位元素上面
-	都是定位元素	使用css属性z-index来控制层叠顺序

取值可以是正整数、负整数、0

比较原则

• 如果是兄弟关系
• z-index越大，层叠越再上面
• z-index相等，写在后面的那个元素层叠在上面
• 如果不是兄弟关系
• 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
• 而且这两个元素必须进行设置z-index