定位

将盒子 在某一个 置 自由的漂浮在其他盒子(包括标准流和浮动)的上面

定位 = 定位模式 + 边偏移

边偏移

边偏移属性 示例 描述
top top: 80px 顶端 偏移量,定义元素相对于其父元素 上边线的距离
bottom bottom: 80px 底部 偏移量,定义元素相对于其父元素 下边线的距离
left left: 80px 左侧 偏移量,定义元素相对于其父元素 左边线的距离
right right: 80px 右侧 偏移量,定义元素相对于其父元素 右边线的距离

定位模式

选择器 { position: 属性值; }
语义
static 静态 定位
relative 相对 定位
absolute 绝对 定位
fixed 固定 定位

静态定位(static)

静态定位 是元素的默认定位方式

相对定位(relative)

  • 相对定位 是元素 相对 于它原来在标准流中的位置来说的
  • 原来 在标准流的区域继续占有 ,后面的盒子仍然以标准流的方式对待它

绝对定位(absolute)

  • 绝对定位 是元素以带有定位的父级元素来移动位置
  • 完全脱标 ---- 完全不占位置
  • 父元素没有定位 ,则元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位

子绝父相 ---- 子级 绝对 定位, 父级 要用 相对 定位。

固定定位(fixed)

  • 完全脱标 ---- 完全不占位置
  • 只认 浏览器的可视窗口 ---- 浏览器可视窗口 + 边偏移属性 来设置元素的位置

    • 不随滚动条滚动

扩展

居中

绝对定位/固定定位的盒子 不能通过设置 margin: auto 设置 水平居中

  1. left: 50%; :让 盒子的左侧 移动到 父级元素的水平中心位置
  2. margin-left: -100px; :让盒子 向左 移动 自身宽度的一半

堆叠顺序(z-index)

加了定位的盒子,默认 后来者居上 , 后面的盒子会压住前面的盒子

selector {
    z-index: value;
}

属性值 正整数 负整数 0 ,默认值是 0,数值越大,盒子越靠上

z-index 只能应用于 相对定位 绝对定位 固定定位 的元素,其他 标准流 浮动 静态定位 无效

定位改变display属性

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

给盒子改为了浮动或者定位,就不会有垂直外边距合并的问题了

总结

定位模式 是否脱标占有位置 移动位置基准 模式转换(行内块) 使用情况
静态static 不脱标,正常模式 正常模式 不能 几乎不用
相对定位relative 不脱标,占有位置 相对自身位置移动 不能 基本单独使用
绝对定位absolute 完全脱标,不占有位置 相对于定位父级移动位置 要和定位父级元素搭配使用
固定定位fixed 完全脱标,不占有位置 相对于浏览器移动位置 单独使用,不需要父级

results matching " "

No results matching " "

results matching " "

No results matching " "