前端学习笔记之定位学习

• 搭建一个网页需要用到的布局方式

  • 标准流

  • 浮动

  • 定位

• 定位的常见应用场景：

  • 解决盒子与盒子之间的层叠问题

  • 可以让盒子始终固定在屏幕中的某个位置

• 使用定位的步骤

  • 设置定位方式

    • t通过属性名：position来设置，常见的定位模式有静态定位（static），相对定位（relative），绝对定位（absolute），以及固定定位（fixed）

  • 设置偏移值

    • 偏移值设置分为两个方向。水平和垂直方向各选一个即可

    • 选取的原则一般是就近原则，离哪边近用哪个（left，right，top，bottom）

• 静态定位：默认定位方式，无定位

  • 静态定位按照标准流特性摆放位置，它没有偏移

• 相对定位：相对于自己之前的位置进行移动

  • 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）

• 绝对定位：相对于祖先的元素位置进行移动

  • 如果没有祖先元素或者祖先元素无定位，则以浏览器为准定位

  • 如果祖先元素有定位，则以最近一级有定位的祖先元素为参考点移动位置

• 子绝父相：子级使用绝对定位，父级使用相对定位

  • 子级绝对定位，不会占有位置，可以放到父级盒子里面的任何一个地方，不会影响其他的兄弟盒子

  • 父级加定位，限制子盒子在父盒子里面移动

  • 父盒子布局时，需要占有位置，因此只能是相对定位

• 固定定位：元素固定于浏览器可视区的位置，主要用于在浏览器页面滚动时元素的位置不会变

  • 以浏览器的可视窗口为参照点移动元素

    • 跟父元素没有任何关系

    • 不随滚动条滚动

  • 固定位置不占有原先的位置（脱标）

  • 固定定位小技巧：固定到版心右侧位置： left：50%；margin-left：版心的一半

• 粘性定位：相对定位和固定定位的混合（sticky）

  • 以浏览器的可视窗口为参照点移动元素

  • 占有原先的位置

  • 必须加bottom，top，left，right其中一个才有效

  • 兼容性较差，IE不支持

• 定位叠放次序：使用定位布局时，出现盒子重叠的情况，可以使用z-index来控制盒子的叠放次序

  • 数值可以是正整数，负整数或者0，默认时auto，数值越大，盒子越靠上

  • 如果属性值相同，则按照书写顺序，后来居上

  • 数字后面不能加单位

  • 只有定位的盒子才有z-index属性

• 定位的拓展：

  • 绝对定位的盒子居中：加了绝对定位的盒子不能通过margin：auto水平居中，但是可以通过一下方法实现水平居中和垂直居中

    • 水平居中：left：50%，margin-left：-盒子宽度的一半

    • 垂直居中：top：50%，margin-top：-盒子宽度的一半

  • 定位特殊特性：

    • 绝对定位和固定定位也和浮动类似

    • 行内元素添加绝对或者固定定位，可以直接设置宽度和高度

    • 块级元素添加绝对或者固定定位，如果不给宽度和高度，默认是内容的大小

    • 脱标的盒子不会触发外边距塌陷

  • 浮动的元素不会压住下面标准流的文字，绝对定位会压住所有标准流的内容