HTML CSS整理笔记 (八) 定位网页元素

作者: web 发布时间: 2019-11-08 浏览: 1973 次编辑

完成笔记链接：https://www.niwoxuexi.com/blog/web/article/1245

————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，值越小越透明

HTML CSS整理笔记更多笔记

HTML CSS整理笔记（一）HTML5基础

HTML CSS整理笔记（二）列表、表格、媒体元素

HTML CSS整理笔记（三）表单

HTML CSS整理笔记（四）CSS3基础

HTML CSS整理笔记(五) CSS3美化网页

HTML CSS整理笔记（六）盒子模型

HTML CSS整理笔记 (七) 浮动