定位（相对、绝对）、z-index

技能目标

 会使用position定位网页元素

 会使用z-index属性调整定位元素的堆叠次序

定位在网页中的应用

什么是定位？

没有定位即以标准流方式显示,不使用样式默认的排列方式

Left：20px    距离原来左侧增加20像素，即向右移动20像素

Top：20px    距离原来上侧增加20像素，即向下移动20像素

它自己原来占的物理空间有没有发生变化？它影不影响后面的元素？

不会发生变化。因为变化后的元素也为块级元素，长宽什么的并没有发生什么变化。不影响后面的元素，因为第二个div样式position默认值为static，后面的元素不会因为其他元素变化而变化（自己写的不知道对不对）

 

相对定位小结

  1、设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置

  2、设置了相对定位的网页元素，无论是在标准中还是在浮动流中，都不会对它的父级

元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移

Boby里面有四个div（第一个大的div包含3个同等大小的div），这三个同等大小的div设置了背景颜色和边框，而对同等大小的第二个div设置绝对定位和向右偏移30像素是指距浏览器右侧30像素

假若我想偏移的这个div是针对父容器（即大的那个div）进行偏移呢？则需要在父容器的样式中加上position：非static即可

 

绝对定位小结

  1、使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位

  2、绝对定位的元素从标准文档流中脱离，这以为着他们对其他元素的定位不会造成影响

 

Fixed  存在浏览器兼容的问题

Position：fixed  随着浏览器的拖动，这个固定元素不会被拖动。类似：一些膏药、漂浮的广告

为什么要z-index  立体  叠放次序  index索引  高于平面（0）则大于0

注意：

  1、单单给某一个元素样式添加position：absolute； 会呈现该元素脱离文档流，但位置不变，因为没有设置偏移量

  2、要使用z-index属性之前必须要有position属性来设置相对或者绝对，固定的定位。通过设置z-index的值这样才能使原本元素默认值为0在不同的平面，达到上下层的效果即覆盖或者被覆盖的效果

 

制作京东首页图片轮播效果

使用列表制作图片轮播数字按钮

  使用position设置元素定位  或者 浮动也行

 

border-radius:50%   向div元素添加圆角边框

cursor：pointer鼠标移动到该元素时，变成小手，成为可点击状态

H5+CSS3

 酷炫网站制作

 游戏开发

 移动开发

 应用开发

 

*{

  Margin:0px;

  Padding:0px;

}               整个网页上所有元素都把它默认的边界、填充清一下

 

background:url(img/ke.jpg) 0px 0px / 300px 437px no-repeat;

 背景图片路径  背景图片的偏移量（即紧贴容器的边）   背景图片的宽高  背景图片不重复

阴影 box-shadow：-7px 10px 10px #333;  水平阴影(x轴)垂直阴影(y轴)影子的模糊距离 影子颜色

transform: rotateX(60deg) rotateY(3deg) rotateZ(-25deg)        变形，变化:围着X、Y、Z轴转

transform-style:preserve-3d;    这个标签包含的那个标签实现3d效果（这个div的子元素）

perspective:1200px;       一般这两个属性结合使用，设置三维透视的距离，站在不同的位置（山上、山下）看到山的效果

.ke:hover{}    class为ke，鼠标移动上去的效果

transition:all 1s ease-out；       过渡:所有属性 过渡时间 以慢速结束