岳治琴

定位
定位一共有4个方向,left,right,top,bottom;格式为:先写定位方式,后写方向。position:...
扫描右侧二维码阅读全文
19
2018/02

定位

定位一共有4个方向,left,right,top,bottom;
格式为:先写定位方式,后写方向。

position:absolute;
top:20px;
left:30px;

静态定位

语法:position:static;
默认值:文档流(元素自上而下,自左而右,块元素独占一行,行内元素在一行上显示,碰到父集元素的边框换行)。这是默认的定位方式。

绝对定位

语法:position:absolute;
特点:

  • 元素使用绝对定位之后不占据原来的位置(脱标)。
  • 元素使用绝对定位,位置是从浏览器出发。
  • 嵌套的盒子,父盒子没有使用定位,子盒子绝对定位,子盒子位置是从浏览器出发,如果父盒子使用了定位,子盒子的位置就从父盒子位置出发。
  • 给行内元素使用绝对定位之后,转换为行内块。(不推荐使用此方法转行内块)

相对定位

语法:position: relative;
特点:

  • 使用相对定位,位置从自身所在的位置出发。
  • 元素一走后,还会占据原来的位置,不会有其他元素填补。
  • 父元素相对定位,子元素绝对定位,子元素就会从父元素位置开始计算。(建议使用)
  • 行内元素使用相对定位不能转行内块

固定定位

语法:position:fixed;
特点:

  • 元素使用绝对定位之后不占据原来的位置(脱标)。
  • 元素使用固定定位之后,位置从浏览器出发。
  • 给行内元素使用固定定位之后,转换为行内块。(不推荐使用此方法转行内块)

附录:定位的盒子垂直居中

  • margin:0 auto; 只能让标准流的盒子居中对齐。
  • 定位的盒子居中:先水平移动父元素盒子的一半50%,在向反方向移动子盒子的一半(margin-left:负值。)

注意:

  • left比right,权重高。有left又有right的时候,执行left的值。
  • top比bottom,权重高。有top又有bottom的时候,执行top的值。
  • 定位中,两个定位(static和relative)不能将行内元素转化为行内块,另外两个可以。
Last modification:March 1st, 2018 at 11:25 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment