CSS定位

定位=定位模式+位偏移

static静态 relative相对 absolute绝对 fixed固定

top bottom right left

static

选择器{position：static；}按照标准流进行

relative

是元素在移动位置相对于原来的位置来说的，原来标准流的盒子继续占有，后面的盒子仍然以标准流的方式对待她就是灵魂出窍一样，灵魂走了。但是人还在

选择器{position：relative；} 

absolute

是元素在移动位置相对于祖先元素来说的

如果没有父元素或族元素没有定位，就按照浏览器来定位；如果有，就按照最近一级来参考

fixed

以浏览器的可视窗口作为定位点，不占有原先的位置

如何让固定到版型右侧 

stick

以浏览器的可视窗口作为定位点，占有原先的位置

必须是{position：sticky；top：10px；}有top bottom等

Z-index

选择器{z-index：1；}

如果属性值相同，后来居上，必须是定位的盒子才行，浮动标准流没有

加了绝对定位的不能margin：auto 0；来居中。但是可以

left：50%；

margin-left：-100px；

浮动只会压制标准盒子，但是不会图片或文章

绝对会压制标准流所有内容

淘宝焦点图

1．大盒子拟门类名为： tb 一 Promo。淘宝广告
2．里面先放一张图片。
3.两个按钮用链接 左边Prev右边next 
4.底侧 小圆点 ul 继续做。类名为 promo 一 nav

display：none；隐藏元素。且不占位置

display：block；显示

visibility：visible元素可视

visibility：visible隐藏，仍然占有原来的位置

display显示隐藏元素不保留位置

visibility显示隐藏元素保留原来的位置

overflow溢出显示隐藏，但是只对于溢出的部分处理

.mask {

display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: Drgba(0,0, 0, .4) url(images/arr.png) no-repeat center;
}
.tudou:hover .mask {
display: block;
}

<div class=”tudou’>
<div class=”mask”></div>
cimg src=”images/tudou.jpg” alt=“ ”> </div>
<div class=”tudou”>