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

一、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)

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

css3制作手风琴,CSS3实现可关闭的下拉手风琴菜单效果
本文实例讲述了CSS3实现可关闭的下拉手风琴菜单效果.分享给大家供大家参考.具体如下: CSS3菜单实例,运用纯CSS3技术实现一款下拉手风琴菜单功能,其实不能说是关闭,应该来说是折叠或收缩了,点击菜 ...
html实现导航下拉菜单绝对定位,纯CSS导航下拉效果,神奇的定位与显示属性
导航下拉,大家首先想到的是用JS来做.或许是大家看到的下拉菜单演示,多是JS控制的下拉,导致从先入为主的意识上,误以为二级下拉是很难的东西,必须要会Javascript才能做. 其实,一个简答的下拉效 ...
CSS基础必备知识点04
1.display属性 display,显示,用来进行行内元素与块级元素之间的相互转换.将隐藏的元素显示或者将显示的元素进行隐藏. display这个属性取值有:inline(行内).block(块级 ...
jQuery-动画效果（王者荣耀手风琴案例）
王者荣耀手风琴案例,如下图所示: 该效果为王者荣耀官网上面的效果,下面我们将实现这个效果. 结构分析: 静态页面实际上是ul标签下面包含了7个小li标签,然后每一个小li标签下面有两张图片,一个为表面 ...
美团网求上市，是否会重蹈拉手网的覆辙？
前不久亿欧网独家报道了美团网即将敲定融资,下半年将赴美上市的消息后在业界引起较多讨论,舆论普遍对美团网的未来发展持乐观态度;不少美团网的员工私下问笔者美团网的估值和上市前景问题,对于美团网估值只有大众 ...
jquery实现王者荣耀手风琴(折叠卡片)效果
先看看效果: 该效果为王者荣耀官网上面的效果,下面我们将实现这个效果. 分析: 静态页面实际上是ul标签下面包含了7个小li标签,然后每一个小li标签下面有两张图片,一个为表面的小图片和被隐藏之后的大 ...
html显示线条流动效果,css3实现线条流动效果
1实现原理: 通过animation中的clip实现对div的不断切割首先要弄懂clip的含义,四个参数分别是上右下左,以上和左为标准. clip使用的前提是元素绝对定位. 本来想实现这样效果看起来 ...
仿QQ点赞吹泡泡效果
整理的网上资料效果如图下载地址 http://download.csdn.net/detail/qq_34709056/9852127
AI绘画第二步，抄作业复现超赞的效果！
上一篇,讲了如何安装AI绘画软件,但是装完后发现生成效果很渣!而网上那些效果都很赞.真的是理想很丰满,现实很骨感. 今天就是来聊聊如何抄作业,最大程度的还原那些超赞的效果.换一种说法就是,教大家如何使 ...

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

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

最新文章

热门文章