静态定位
由浏览器决定 行级标记从左到右 块级标记从上到下
<!-- 由浏览器绝顶 行级标记从左到右 块级标记从上到下 -->
<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