Chapter08-定位网页元素

会使用position定位网页元素

position属性 定位

1. static:默认值

2. relative:相对定位
   相对于自身的位置进行偏移 left:20; :距离左边的位置20px
   任然在标准的文档流中 对于父级元素和相邻的元素没有任何影响
   原来的位置会保留下来

/*设置相对定位:relative*/
	position: relative;
	/*设置完相对定位后 top left right bottom 可以对此元素进行移动*/
	/*相对于自身原来的位置进行偏移*/
	/*会保留原本的位置*/
	/*left: -30px;!*相对于本来的位置距离左边-30*!
	top: 30px;*/
	top: 200px;

浮动与相对定位结合那么相当于  即浮动了  又可以随意的跳转它的位置

3. absolute:绝对定位

绝对定位要有一个父级作为灯塔 所以一般情况下相对定位 设置在要进行绝对定位的父级

/*为第二个盒子设置绝对定位*/
	position: absolute;
	/*绝对定位会超出当前的文本流*/
	top: 10px;
	/*位移是随着浏览器边缘发生改变的*/
	left: 10px;
	/*如果父级元素发生定位   就会随着已经定位的祖先元素进行偏移*/

5. fixed:固定定位
   相当于浏览器窗口来决定位 不会随着页面的滑动而移动
   position: fixed;
   通过top right left bottom来改变位置
   一般用于吸顶栏加粗样式 网页两侧的广告

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

语法:
z-index: 0; 默认值 任何定位元素的默认都是0
只要设置z-index属性值大于0 那个这个元素就在其他默认元素的上方展示
值越大 层次就越高 没有最大值 谁大谁就在上方
网页元素的透明度:
opacity:最大值1 最小值0 通过小数来控制透明程度

/*不透明度*/
	opacity: 0.3;
/*IE的写法:  透明通道  最大值100 最小值0  越小透明程度越高 */
	filter:alpha(opacity=30);