css position块级元素定位

1.块级元素定位方式：

• 绝对定位 position:absolute

• 相对定位 position:relative

• 固定定位 position:fixed

2.定位语句写法：

1. 写定位方式
2. 使用top right bottom left 四个方向属性进行正负操作
3. z-index层级的使用，必须要先使用定位才可以使用该属性

3.使用方式：

1. 绝对定位和相对定位：子绝父相
2. 固定定位：可将指定内容固定在页面的某一处，如右下角的各种广告，随便页面怎样滑动，该内容不动

4.示例：

定义一个嵌套的div

<div class="re_f f" >
	<div class="re_s s"></div>
</div>

无定位时的结果：

1.相对定位

<style>
	.re_f{width: 200px;height: 200px;border: 1px solid black;background: #e3e3e3;}
	.re_s{width: 50px;height: 50px;border: 1px solid black;background: yellow;}
	/*相对定位*/
/*父定位且移动,子也移动   子随父动*/
	.f{position: relative;top: 200px;}
	.s{position: relative; top: -100px;left:100px; }
</style>

相对定位元素经常被用来作为绝对定位元素的容器块。
2.绝对定位

/*绝对定位*/
/*父定位移动,子也移动   子随父动*/
<style>
.f{position: absolute;top: 200px;}
.s{position: absolute; top: -100px;left:100px; }
</style>

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< html>