定位网页元素

《定位网页元素》

一、网页的定位机制
1.网页中的三种定位机制
a、标准文档流
b、浮动float
c、绝对定位
2.仅用浮动和盒子模型，无法实现特定情况下的复杂定位
a、图片右上角的关闭按钮效果
b、固定在右下角的回顶部
c、鼠标移上去的下拉效果
3.position属性实现元素的定位（position：定位，位置）
a、static 默认值，没有定位，即按照标准文档流排布
b、relative相对定位
c、absolute绝对定位
d、fixed固定定位

二、fixed定位
1.fixed：固定
2.以浏览器窗口为基准进行定位，滚动文档页面的时候，依然保持对象位置不变
3.通过position：fixed属性设置
4.设置为fixed定位后，即脱离了标准文档流，对其他页面元素将不再影响
5.参照浏览器窗口，通过坐标来进行定位：
left、right、top、bottom
6.坐标的值：
a、可以是具体的像素
b、也可以是百分比（这里是相对于浏览器）
c、以上两个值都可正可负，负即为反方向
7.案例：
a、定位在右下角
b、定位在顶部工具栏占满整行
c、定位在底部工具栏占满整行
8.如何让元素水平垂直都居中
a、设置宽度
b、left:50%
c、margin-left设置为负数，且为宽的一半
transform:translate(-50%,-50%);指的是图片向左移动自身宽度的50%,向上移动自身高度的50%。
transform:translate(X,Y);

三、相对定位relative
1.relative：相对的
2.通过position：relative设置元素为相对定位
a、相对定位的盒子会相对于它原来的位置，通过指定偏移，到达新的位置
b、相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子没有任何影响
c、相对定位的盒子原来的位置会被保留下来
3.相对定位一般很少单独使用，都是配合绝对定位使用

四、绝对定位absolute
1.absolute：绝对
2.通过position:absolute设置元素为绝对定位
a、绝对定位的元素会脱离标准文档流
b、绝对定位的元素，可以通过left、right、top、buttom定位
c、以它最近的一个已经定位的祖先元素为参照物进行偏移
d、已经定位的祖先元素是指position为relative/fixed/absolute其中之一的元素
e、如果没有已经定位的祖先元素，那么会以浏览器为参照物进行定位
f、如果设置了绝对定位，又没有设置偏移量，元素会脱离文档流，但保持在原有的位置
g、通常和相对定位联用，让相对定位relative充当绝对定位的父元素作为参照物
3.完成多个div盒子关闭效果的制作
a、会出现多个关闭按钮“X”位于同一位置，应该对它的父级元素设置相对定位
b、可能会出现空白边，是换行导致的，不能删除，应该使用display：block

五、元素的定位层次
1.z-index 属性用于调整元素定位时重叠层的上下位置
2.z-index属性在立体空间中表示垂直于页面方向的z轴
3.z-index属性的值为整数，可正可负
4.z-index只有在设置了position定位的情况下才起作用
5.z-index的默认值是0
6.属性值大的位于属性值小的上方，如果值一样，则后来居上
7.设置元素透明：
a、opacity—CSS3新增加的
b、filter:alpha(opacity=x)—早期的ie浏览器支持
c、background:rgba(0,0,0,0.5);
d、透明度的范围是0-1
8.通过设置line-height来实现单行文字的垂直居中
9.案例：图片相框上面显示文字标题说明，文字标题的背景是半透明的

六、FastStoneCapture软件的使用

七、综合案例
1.带箭头的列表
a、小图片可以去iconfont网站去找
2.图片相框上面显示文字标题说明，文字标题的背景是半透明的
涉及到的知识点：
a、重置边框:margin:0;padding:0;
b、div、cetion、img、p标签
c、浮动float、清除浮动overflow:hidden
d、position，相对定位relative、绝对定位absolute
e、display:block
f、text-align:center，background:rgba(0,0,0,0.5)
3.模拟实现一个简单的轮播图效果
4.实现下拉菜单效果