定位css（day6）

定位
目标：

1. 为什么需要定位
2. 能说出定位的4种分类
3. 能说出4种定位的各自特点
4. 能说出我们为什么常用子绝父相布局

应用
能写出淘宝轮播图布局

定位详解
定位=定位模式+边偏移

边偏移
top/bottom/left/right
定位盒子有了边偏移才有价值

定位模式：
static 静态定位
ralative 相对定位
absolute 绝对定位
fixed 固定定位

static静态定位
相当于border里面的none
没有定位的意思，没有边偏移的
静态定位在布局中几乎不用

ralative 相对定位**（重点）**
相对于原来的位置（自恋型）
相对定位的特点：（务必记住）

1. 相对于自己原来的标准流中位置来移动的
2. 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

绝对定位（ausolute）重要
绝对定位是元素以带有定位的父级元素来移动位置（拼爹型）
1.完全脱标——完全不占位置
2.父元素没有定位，所以浏览器为准定位

<style>
		.father {
			width: 350px;
			height: 350px;
			background-color: pink;
			margin: 100px;
			position: relative;
		}
		/*标准流的子盒子总是以父级为准移动位置*/
		/*如果 父级 没有定位 绝对定位子盒子 以我们文档为准浏览器移动位置*/
		/*如果 父级 有定位 绝对定位子盒子 以父级为准移动位置*/
		.son {
			width: 200px;
			height: 200px;
			background-color: purple;
			position: absolute;
		    top: 50px;
		    left: 50px;
		}
	</style>

口诀：子绝父相

固定定位（fixed）重要

固定定位是一种特殊的绝对定位
1.完全脱标 不占位置
2.只认浏览器可视窗口——浏览器可视窗口+边移属性来设置元素的位置

• 跟父元素没有任何关系
• 不随滚动条滚动

定位的扩展
绝对定位的盒子居中
注意：绝对定位/固定定位的盒子不能通过设置margin：auto设置水平居中。****
在使用绝对定位时，可以按照下面的方法：

1. left：50%：让盒子的左侧移动到父级元素水平中心位置
2. margin-left：-100px（100为绝对定位盒子自己宽度的一半）

网页中的坐标系：
左边为负值，右边正值，下边正值，上边负值

堆叠顺序 （z-index）

可以调整盒子的位置

1. 属性值：正整数、负整数或0，默认值是0，数值越大，盒子越靠上。
2. 如果属性值相同，则按照书写顺序，后来居上
3. 数字后面不能加单位

注意：z-index只能应用于相对定位、绝对定位和固定定位元素，其他标准流、浮动和静态定位无效。

定位改变display属性
前面我们讲过，display是显示模式，可以改变显示模式有以下方式：

1. 可以用inline-block转换为行内块
2. 可以用浮动float默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
3. 绝对定位和固定定位和浮动类似，默认转换的特性，转换为行内块。

所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

注意细节：

 .top {
        	/*因为没有写宽度，默认宽度是内容的宽度*/
        	/*此时我们需要给这个top 盒子 通栏盒子*/
        	/*所以以后定位的盒子是要写宽度的*/
        	position: fixed;
        	top: 0;
        	width: 100%;
        	height: 44px;
        	text-align: center;
        	background-color: pink;
        }

同时注意：
浮动元素、绝对定位（固定定位）元素都不会触发外边距合并问题。

圆角矩形设置4个角
圆角矩形可以为4个角分别设置圆度 但是是有顺序的

            border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			border-bottom-right-radius: 20px;
			border-bottom-left-radius: 20px; 

先写上下，后写左右
简写格式：

border-radius：左上角  右上角  右下角  左下角

按照顺时针方向

定位小结

注意：

1. 边偏移需要和定位根式联合使用，单独使用无效。
2. top和bottom，不要同时使用
3. left和right不能同时使用

固定定位盒子贴页面版心算法：
1.一般情况下，固定定位都是以浏览器为准的
2.要想使与网页版心紧紧挨着，需要移动
3.首先，位置宽度要到整个网页的50%，margin值是然后是版心的50%+自己本身的宽度

.g {
	position: fixed;
	top: 100px;
	/*整个网页布局的50%*/
	left: 50%;
	/*600是版心的一半，再加上自己的宽度为180px*/
	margin-left: -780px;
	width: 180px;
	height: 420px;
	background-color: pink;
}