定位

定位=定位模式+边偏移

边偏移

边偏移要和定位模式联合使用，单独使用无效。
边偏移属性 含义
top 元素相对于其父元素上边的距离
bottom 元素相对于其父元素底边的距离
left 元素相对于其父元素左边线的距离
right 元素相对于其父元素右边线的距离

定位的分类

静态定位

静态定位是元素默认定位方式，即无定位，当不需要定位的时候引用。

静态定位按照标准流特性摆放，没有边偏移。

相对定位relative

相对定位是元素相对于原先在标准流的位置来说的。

position：relative； /相对定位/
left：20px；
top：50px； /*边偏移/

特点：
相对定位是相对于自己原来在标准流中的位置移动
在标准流中占有的区域继续占有，其后面的盒子仍以标准流对待它

绝对定位absolute

绝对定位是元素相对于它的父级元素的位置来设置的

特点：
设置绝对定位的盒子不占位置
若父元素没有定位，则盒子以浏览器的左上角为基点定位
若父元素有定位，则根据最近的已经定位的父元素进行定位

固定定位fixed

固定定位是绝对定位的一种特殊形式
特点：
完全不占位置
只认可浏览器的可视窗口来设置元素的位置
与父元素没有任何关系且不随网页滚动条滚动

绝对定位的盒子居中

方法如下：

left：50%； /让盒子的左侧移动到父级元素的水平中心位置/
margin-left：-100px；
/让盒子向左移动自身宽度的一半，大小根据盒子大小确定/

注意：绝对定位或固定定位的盒子不能通过margin：auto来设置水平居中

堆叠顺序（z-index）

定位布局时可能出现盒子重叠现象，一般来说默认后来居上，即后面定义的盒子会压住前面的盒子。于是可以应用z-index来调整盒子的堆叠顺序。

特点：
属性值可以为正整数、负整数或0；默认初始值为0，数值越大盒子位置越靠上。
若两个盒子属性值相同，则遵循书写顺序堆叠，即哪个在后面定义就在最上面。
数字后面不可以加单位。
z-index只能应用于相对定位、绝对定位和固定定位的元素。

圆角矩形设置方法

border-top-left-radius：30px；
border-top-right-radius：30px；
border-bottom-right-radius：30px；
border-bottom-left-radius：30px； /注意顺序/
/若四个角数值相同/
border-radius：30px；
/数值不同的简写形式（顺时针）/
border-radius：左上 右上 右下 左下；

未经本人允许禁止转载