CSS基础学习05（定位）

（一）定位
1、边偏移
在CSS中，通过top 、bottom、 left、 right属性定义元素的边偏移
top：顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom：底部偏移量，定义元素相对于其父元素下边线的距离。
left：左侧偏移量，定义元素相对于其父元素左边线的距离。
right：右侧偏移量，定义元素相对于其父元素右边线的距离。

定位的盒子有了边偏移才有价值

2、定位模式
语法： 选择器 { position:属性值 }

定位模式的分类：
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

定位=定位模式（static,relative,absolute,fixed)+边偏移(top、bottom、left、right)

（1）静态定位
static：默认的定位方式意思是无定位，按照标准流摆放位置，没有边偏移，静态定位在布局时几乎不用
(2）相对定位：relative（重要！！！）

相对定位是元素相对于它原来在标准流中的位置来移动的

特点：原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

（3）绝对定位：absolute（重要！！！）
<1>、绝对定位，如果父级没有定位，那么绝对定位的子级盒子会以浏览器的为准来移动位置
<2>、如果父级元素（爸爸，爷爷都可以，只要是比他大的就可以）有定位（不管父元素是什么定位，只要有定位即可，但除了static外），那么子元素就会以父级元素为准进行定位
<3>绝对定位不会保留原来的位置，完全脱标，若某盒子使用了绝对定位，那么它下面的盒子便会占据它原来的位置
因此使用绝对定位的时候，要和父级一起搭配使用

子绝父相：子级元素用绝对定位，父级元素用相对定位（重要！！！）

（4）固定定位：fixed）（重要！！！）
固定定位是绝对定位的一种特殊形式
<1>完全脱标：完全不占位置；

<2>只认浏览器的可视窗口
跟父元素没有任何关系；单独写就可以了
不随滚动条滚动；

3、定位的拓展
(1)、绝对定位的盒子居中
注意：绝对定位(absolute)/固定定位（fixed）的盒子，不能通过设置margin:auto水平居中对齐
方法：
left：50%；让盒子的左侧移动到父级元素的水平中心位置
margin-left：-XXpx;让盒子左移动自身宽度的一半
上下移动是看高，左右移动是看宽

(2) 堆叠顺序（z-index)
加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子

因此通过z-index层叠性可以调整盒子顺序
z-index的特性：
<1>属性值：正整数，负整数或0 ，默认值是0，数值越大，盒子越靠上；
<2>如果属性值相同，按照书写顺序，后来居上；
<3>数字后面不加单位
注意：z-index 只能应用于相对定位，绝对定位和固定定位的元素，其他标准流，浮动和静态定位无效

(3)定位改变display属性
<1>float默认将元素转换成行内块（类似，但并完全一样，因为浮动是脱标的）
<2>绝对定位和固定定位也和浮动类似，默认转换属性转换为行内块

因此如果一个行内盒子，如果有了固定定位或绝对定位或浮动，就不用在加display了，可以直接给宽高

注意：定位的盒子如果需要通栏，我们宽度就给100%

（4）浮动元素、绝对定位，固定定位的元素都不会触发外边距合并的问题，（我们以前使用padding boder overflow解决的），但是现在如果给盒子改了浮动或者定位，就不会有垂直外边距合并的问题了。

圆角矩形设置四个角，是有顺序的：
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

连写的格式：（顺时针）
border-radius: 左上角 右上角 右下角 左下角
没有写的要用0表示

圆角设置就是写成高度的一半，这样那个角就会变成圆角了

（5）想让某个盒子贴近版心的固定位置的话，其公式是：
left:50%
然后 往左走版心的一半 +自己的宽度