————8 定位网页元素————
51.Position属性:指定盒子的位置,相对它父级的位置或它自身应该在的位置。
(1)static 默认无定位,元素按照标准文档布局。
(2)relative相对定位
a.特性:
1.以标准文档流排版为基础,相当于它在原来位置偏移指定的距离。
2.元素位置偏移后,仍会保留原位置。
3.层级提高,可以遮盖标准文档流元素和浮动元素。
b.使用场景:
相对定位可以不设偏移量,让后面的绝对定位以它为祖先元素作基准定位。
c.语法 position:relative,指定偏移量时:水平left(正值向右移)、right(正值向左),垂直top(正值向下)、bottom(正值向上)。如div{
position: relative;
top:-20px;
left:20px;
}
(3)absolute绝对定位
a.特性:
1.以已定位的祖先元素作基准定位,如果没有定位的祖先元素,则以浏览器窗口为基准定位。
2.元素位置偏移后,不保留原位置(其他元素可以用它原来的空位)
3.层级提高,可以遮盖标准文档流元素和浮动元素。
4.设置绝对定位的元素脱离文档流,对其他盒子的定位无影响
b.使用场景:下拉菜单、焦点图轮播、弹出数字气泡、特别花边等。
(4)fixed固定定位
a.特性:直接以浏览器窗口为基准定位,偏移位置不受窗口滚动条滚动的影响。
b.使用场景:窗口边缘的固定广告、返回顶部图标、边缘固定导航栏等。
52.z-index属性:设置定位元素的堆叠顺序。默认值0,值大的层位于值小层的上方。
(1)网页中的元素都含有两个堆叠层级,一个是未设置绝对定位时所处的环境,此时z-index是0;另一个是设置绝对定位时所处的堆叠环境,此时层的位置由z-index的值确定。
53.设置元素透明度的方法(通常两种方法搜设置以适应所有浏览器兼容)
(1)opacity:x x值为0~1,值越小越透明
(2)filter:alpha(opacity=x) x值为0~100,值越小越透明