静态 相对 绝对 固定 标签定位

静态定位

 由浏览器决定 行级标记从左到右 块级标记从上到下

<!-- 由浏览器绝顶 行级标记从左到右 块级标记从上到下 -->
		<a href="http://www.baidu.com">超链接</a><b>dd</b><i>dddd</i><span id="">ffff</span>
		<p>ttt</p>
		<div id="">
			jjj
		</div>
		<h1>uuuu</h1>

相对定位  position: relative;

需要附加 left top bottom right属性及属性值 来决定位置

意为相对于自己原来方向在现在方向的某个位置某个距离

        .d2{
				background-color: #ebffb4;
				/* relativ相对 */
				/* 相对定位 */
				position: relative;
				/* 原位置在目前位置的左边30px处 */
				left: 30px;
				/* 原位置在目前位置的上边100px处 */
				top: 100px;
				
			} 黄色的是d2

绝对定位 position: absolute;

需要附加 left top bottom right属性及属性值 来决定位置

绝对定位的标记 脱离标准流 到达一个绝对流平面 绝对流平面在上面 
原来占据的标准留空间会被释放 其他标记可以递补 
 绝对定位的参考标记(如果想以父类为基准的绝对定位 那父类也需要设定position属性)
      1.设置了定位属性的父标记 
      2.body标记 

(下记图片 蓝色div被设置绝对定位悬浮在标准流平面上的绝对流平面 原本蓝色div的位置被粉色div递补 )

固定定位 position: fixed;

需要附加 left top bottom right属性及属性值 来决定位置

会一直固定在页面 无论怎么滚动页面依旧在该位置

        .d2{
				width: 200px;
				height: 100px;
				background-color: #BA99FF;
				/* fixed 固定 */
				position: fixed;
				/* 右下角 */
				right: 20px;
				top: 30px;
			}

z-index样式

z代表z轴

可以用做元素之间的覆盖

            .d1{
				background-color: red;
				z-index: 10;
			}
			.d2{
				background-color: blue;
			}
        此时d1会覆盖d2