第八章 定位网页元素

Posted 2021-01-18 dabrk

一.定位网页元素
	
	position	：
		
		1.static 	:默认值，代表没有定位，元素没有定位会以标准文档流方式展现出来
		
		2.relative  :相对定位，元素以自身原来位置进行定位（如果设置元素浮动，那么会以浮动后的位置作为原来的位置）
			
			规律：
				设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
				设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
				设置相对定位的盒子原来的位置会被保留下来
				
		3.absolute	:绝对定位，元素以离他最近的已经定位的祖先元素进行定位，如果没有祖先元素定位，那么会以浏览器窗口进行定位
		
				使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
				如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
				绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响
				元素位置发生偏移后，它原来的位置不会被保留下来
		4.fixed	:基于浏览器窗口进行定位，不会随着滚动条的移动而改变位置
		
			相对浏览器窗口来定位
			偏移量不会随滚动条的移动而移动
			
	
	元素偏移方向：
		如果想让元素向上移动，那么top属性写赋值，或者bottom属性写正值
		如果想让元素向下移动，那么bottom属性写赋值，或者top属性写正值
		如果想让元素向左移动，那么left属性写赋值，或者right属性写正值
		如果想让元素向右移动，那么right属性写赋值，或者left属性写正值
二.设置定位元素的层叠
	
	z-index：默认为0	值越大层级越上
	
	opacity	:0-1		值越小越透明
	filter:alpha(opacity=x)：0-100	值越小越透明