2.4 css定位

一、复习

1.1 a标签的4个

• a:link 没被点击过的链接
• a:visited 访问过的链接
• a:hover 悬停
• a:active 按下鼠标不松手

可以简写为

a{}
a:hover{}

1.2 background系列的属性

• background-color
• background-image
• background-repeat
• background-position
• background-attachment

1.3 background属性大综合

background:url() -100px -100px no-repeat red fixed;

二、相对定位

定位有三种，分别是相对定位，绝对定位，固定定位；

• 相对定位 position:relative;
• 绝对定位 position:absolute;
• 固定定位 position:fixed;

2.1 认识相对定位

• 相对定位，就是让元素相对自己原来的位置，进行位置调整；
  也就是说，如果一个盒子向想进行位置调整，那么就要使用相对定位
  position:relative; -> 先声明，自己要相对定位了；
  left:100px; ->然后进行调整
  top:100px; ->然后进行调整
• 相对定位不脱标；
• 作用：做绝对定位的参考；

三、绝对定位

• 绝对定位比相对定位更灵活
• 绝对定位脱标，不再需要display:block；就可以设置宽，高了；
• position:absolute; 有四个位置设置，left,top,right,bottom;
• 注意：bottom是相对于首屏大小对应的页面左下角；
  绝对定位，如果父辈元素中也出现了定位元素(这个定位可以是相对定位，也可以是绝对定位)，那么将以父辈这个有定位的元素，为参考点
• 子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动
• 绝对定位的儿子，无视参考的那个盒子的padding。

四、绝对定位的盒子居中

width: 600px;
height: 60px;
position: absolute;
left: 50%;
top: 0;
margin-left: -300px;   → 宽度的一半

四、固定定位：position:fixed;

固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。
固定定位脱标！

五、z-index

• z-index值表示谁压着谁。数值大的压盖住数值小的。
• 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
• z-index值没有单位，就是一个正整数。默认的z-index值是0。
• 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
• 从父现象：父亲怂了，儿子再牛逼也没用。