CSS之定位

CSS定位

定位 = 定位模式 + 边偏移
边偏移：top,bottom,left,right
定位模式（position）：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

静态定位：（无定位）无边偏移，（了解）

相对定位（自恋型）：

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

绝对定位（拼爹型）：

1.是以带有定位的父级元素为基准来移动位置。当子盒子定位，而父盒子没有定位，子盒子则以浏览器为基准
2.不保留原来的位置

子绝父相原理
子级元素用绝对定位（不占据位置，随意摆放），父级用相对定位（占据位置）

这种在网页布局中经常用到，就像那种轮番图，一个图片上面还压着其他的图标等等。最主要的特点就是子集元素可以在父级上随意摆放。标准流和浮动压不住图片，但定位可以

固定定位：

1.完全脱标（完全不占位置）
2.只认浏览器的可视窗口（跟父元素没有任何关系，不随滚动条滚动）

绝对定位的盒子水平居中（不能通过margin：auto居中，relative 可以这样居中）
1.left:50%;
2.margin-left:-100px;(让盒子向左移动，自身宽度的一半)

绝对定位的盒子垂直居中
1.top:50%;
2.margin-top:-30px;(让盒子向上移动自身高度的一半）注意是负值

堆叠顺序：加了定位后，盒子之间可以相互堆叠，后来者居上
z-index可以改变其堆叠顺序，只能用于定位中（普通流，浮动都不行) 特性：

1.属性值：正整数，负整数，0，默认为0，数值越大，盒子越靠上。
2.数字后面不能加单位（和font-weight一样）

定位改变display属性
行内块不给宽度，宽度就默认为内容的宽度
变为行内块有以下方式：

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

即一个行内的盒子，如果加了浮动，固定定位和绝对定位，不用转换，就可以设置宽度和高度。

定位的盒子在很多情况下是要给宽度的（通栏就100%）。并且有的页面导航栏是固定定位，因为固定定位是脱标的不占位置，所以下面的盒子要不想被压着就要给个margin-top

标准流的子盒子会随着父盒子的移动而移动，因而触发了嵌套块元素垂直外边距的合并（塌陷）问题：
（当子盒子在父盒子中想要移动位置并且父类盒子不动时）
之前也有解决方案，现在父级或子级元素加了浮动，绝对定位（固定定位）都不会出现外边距合并的问题

圆角矩形为四个角设置圆度：

1.如果四个角数值相同 border-radius：20px；
2.如果数值不同，可以按照顺序写 border-radius:左上角 右上角 右下角 左下角 （遵循顺时针）

定位小结

定位模式	是否脱标占有位置	移动位置基准	模式转换（行内块）
相对定位（relative）	不脱标，占有位置	相对自身位置移动	不能
绝对定位（absolute）	完全脱标，不占有位置	相对于定位父级移动位置	能
固定定位（fixed）	完全脱标，不占有位置	相对于浏览器的位置	能