使用绝对定位来实现拉手网上的效果

一、position
position 在英文中表示“位置”的意思  它主要是用于实现对元素的定位
在CSS中定位分为三种：
 position:fixed 固定定位
 position:relatvie 相对定位
 position:absolute 绝对定位
 position:static    　无特殊定位 (默认值)。
注意：
在使用定位属性时，一定要配合定位的坐标来使用！
 left：表示定位的元素离左边多远
 right：表示定位的元素离右边多远
 top：表示定位的元素离上边多远
 bottom：表示定位的元素离下边多远
1固定定位
语法：
position:fixed
固定定位，它是相对于浏览器窗口来进行定位。不管页面如何滚动，固定定位元素显示的位置不会改变！
特点：
 固定定位元素它脱离了标准文档流
 固定定位元素的的层级比标准文档流里面的元素要高 所以固定定位元素它会压盖住标准文档流里面的元素
 固定定位元素它不再占用空间
 固定定位元素它显示的位置不会随着浏览器滚动而滚动


案例1：使用固定定位来实现返回顶部的按钮
 
效果:
 


 
案例2：使用固定定位来实现顶部的导航栏
 
 
效果:
 


2相对定位
语法：
position:relative;
相对定位它是相对于“原来的自己”来进行定位！
 
特点：
 相对定位元素它没有脱离标准文档流
 相对定位元素如果没有设置定位的坐标，那么相对定位元素它还在原来的位置
 相对定位元素设置了定位的坐标以后，那么它会在老家留下一个坑
 相对定位元素它会将标准文档流中的元素压盖住。
 相对定位元素的定位坐标值可以是负数


注意：
相对定位元素它会在老家留下一个坑，所以一般情况下它很少单独使用，相对定位元素它主要是用来配合“绝对定位”元素来使用的。
 
 
3绝对定位
语法：
position:absolute;
什么是绝对定位？
绝对定位元素是相对于“祖先定位元素”来进行定位！
什么是祖先定位元素？
绝对定位元素它会先去查找其父元素是否设置了定位的属性 
如果有设置定位的属性 那么它就会相对于其父元素来进行定位；
但是如果它的父元素没有设置定位属性 那么它就会去查找其父元素的上一级元素是否设置了定位的属性，
如果有设置就相对于其父元素的上一级元素进行定位 
但是如果没有设置 那么会继续往向一级进行查找，
如果其祖先元素都没有设置定位属性，那么它会相对于“浏览器窗口”来进行定位！








 
①自己设置了绝对定位时：如果父元素没有设置定位属性，那么就相对于body进行定  


效果:
 
 
②自己设置了绝对定位时：如果父元素也设置定位属性，那么就会相对于父元素进行定位
 
结构代码：
 


效果：
 
 
③自己设置了绝对定位时：如果父元素也设置定位属性，那么就会相对于父元素进行定位
 


问题：
如果当前元素的父元素与其爷爷元素都设置了相对定位，那么请回答当前的绝对定位元素它会相对于“谁”来进行定位？
答：当前的绝对定位元素它会相对于其父元素来进行定位，也就是说当绝对定位元素查找到了其祖先元素已经设置了定位的属性就不会再去查找上一级元素。


特点：
 绝对定位元素它脱离了标准文档流
 绝对定位元素它不再占用空间
 绝对定位元素它会压盖住标准文档流中的元素
 绝对定位元素它会相对于其“祖先定位元素”来进行定位，这里的祖先定位元素可以是相对定位也可以是固定定位还可以是绝对定位 但是我们一般只会给其实祖先定位元素设置相对定位属性。“子绝父相”子元素设置绝对定位父元素设置相对定位
4使用绝对定位来实现拉手网上的效果
 


 


二、z-index
 z-index表示谁压盖着谁，数值大的会压盖住数值小的
 只有定位的元素才有z-index值 只有设置了固定定位、相对定位、绝对定位了的元素它们才会拥有z-index
 z-index的值是没有单位的 值是一个正整数 默认的z-index的值是0
 如果多个定位元素没有设置z-index属性 或者z-index值设置一样 那么写在HTML后面的定位元素就会压盖住前面的定位元素


都没有设置z-index属性
 
都有设置z-index属性
 
 
三、CSS3
1CSS3与CSS2之间的区别
css3=css2+新语法+新的属性
就是对css2进行扩充 删减 优化
2结构伪类
选择器 功能
E:first-child 匹配第一个孩子
E:last-child 匹配最后一个孩子
E:nth-child(n) 匹配第n个孩子
E:nth-child(2n)或
E:nth-child(even) 匹配偶数的孩子  如：2、4、6…..
E:nth-child(2n+1)
E:nth-child(odd) 匹配奇数的孩子  如：1、3、5…..
E:only-child 匹配有且只有一个孩子
 E:first-child  匹配第一个孩子
 
 E:last-child 匹配最后一个孩子
 
 E:nth-chid(n) 匹配第n个孩子
 
 E:nth-child(2n)或E:nth-child(even) 匹配偶数的孩子
 
 E:nth-child(2n+1)或者E:nth-child(odd) 匹配奇数的孩子
 
 E:only-child 匹配有且仅有一个孩子 
 
 
案例：使用CSS3中的结构伪类选择器来实现隔行变色的表格
 


效果：
 
3border-collapse
这个属性主要是用于来合并表格的边框线 其值为：collapse
border-collapse:collapse;
 
4伪元素
选择器 功能
:first-letter 操作当前元素中第一个字
:first-line 操作当前元素中第一行文字
::before 在之前插入，在一个盒子内部的最前面
::after 在之后插入，在一个盒子内部的最后面
 
5文本阴影
text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色
 
 
描述：
 文字阴影可以有多组值，多组之间用逗号隔开就可以 
 水平阴影正值阴影在右边 负值在左边
 垂直阴影正值在下边，负值在上边
 模糊强度，值越大越模糊
 
6盒子阴影
box-shadow:水平方向阴影 垂直方向阴影 模糊距离 阴影尺寸  阴影颜色 内/外阴影
水平阴影和垂直阴影必须的写，其余的是可以省略不写; 
 
 
 
 盒子阴影可以有多组值，多组之间用逗号隔开就可以 
 水平阴影正值阴影在右边 负值在左边
 垂直阴影正值在下边，负值在上边
 模糊尺寸，值越大越模糊
 
 
给图片设置阴影
 
7圆角矩形
border-radius:左上 右上 右下 左下;
 
如果说border-radius的四个值都是一样的话就可以只需要写一个参数就可以了
上半部分圆形：
 
 
 
 
8圆角矩形案例
 
 
 
 


圆形图片案例
 


9CSS透明度
只要是颜色，都可以用透明度
rgba(红色,绿色,蓝色,透明度)
a：表示透明度的意思  透明度取值：0~1之间  0表示完全透明  1表示不透明
 背景颜色透明
Background-color:rgba(255,255,255,0.3)
 
①背景颜色透明度案例：
 




②文本颜色设置透明度
 文本颜色透明
Color:rgba(255,255,255,0.3)
 边框颜色透明
Border:1px solid rgba(255,255,255,0.5)