Code Better

切换日光/暗黑模式

定位 ​

定位解决盒子层叠显示的问题

浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。

定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位=定位模式 + 边偏移

  • 定位模式：用于指定一个元素在文档中的定位方式。

    css
    position: static | relative | absolute | fixed;

  • 边偏移（方位属性）：决定了该元素的最终位置。

    css
    top | bottom | left | right

边偏移需要配合定位模式使用，单独使用无效
top 和 bottom 不要同时使用
left 和 right 不要同时使用

静态定位static ​

  • 静态定位是元素默认定位方式
  • 静态定位是按照标准流特性摆放位置，它没有方位属性。
  • 静态定位在布局时我们几乎不用的。

相对定位relative ​

  • 自恋型，相对于自己之前的位置进行移动。

  • 特点：

    • 配合方位属性实现移动
    • 相对于自己原来的位置进行移动。
    • 在页面中继续占有原位置，没有脱标。

绝对定位absolute ​

  • 拼祖先型，相对于非静态定位的祖先元素进行定位移动。
  • 特点：
    • 无祖先元素或祖先元素中没有定位，默认相对于浏览器的可视区域进行移动。
    • 祖先元素中有定位（相对、绝对、固定定位），相对于最近的且有定位的祖先元素进行移动。
    • 参照最近的并且已经定位的父辈元素，一层一层向外找，如果父辈无定位，则参照浏览器的可视区域进行移动。
    • 绝对定位脱离标准流，不占有原位置。
    • 绝对定位的盒子显示模式具有行内块元素特点：加宽高生效，如果没设宽高，也没内容，盒子的宽度就是0。

固定定位fixed ​

  • 认死理型，固定定位是元素固定于浏览器可视区的位置。（主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。）

  • 特点：

    • 需要配合方位属性实现移动
    • 相对于浏览器的可视区域进行移动（跟父元素没有任何关系、不随滚动条滚动）
    • 脱离标准流，不占有原位置。可以看做是一种特殊的绝对定位。

扩展 ​

子绝父相 ​

  • 子元素：绝对定位

  • 父元素：相对定位

    • 因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
    • 如果父元素不需要占有位置，子绝父绝也会遇到

  • 好处：

    • 父元素是相对定位，则对网页布局影响最小

sticky 粘性定位 ​

  • 粘性定位可以被认为是相对定位和固定定位的混合

  • 特点：

    • 以浏览器的可视窗口为参照点移动元素（固定定位特点）
    • 粘性定位占有原先的位置（相对定位特点）
    • 必须添加 top 、left、right、bottom 其中一个才有效
    • 跟页面滚动搭配使用。 兼容性较差，IE 不支持。

  • 注意：

    • 边偏移需要和定位模式联合使用，单独使用无效；
    • top 和 bottom不要同时使用；
    • left 和 right不要同时使用。

层叠循序 ​

  • 层级：层叠顺序，垂直于屏幕，上下叠放的关系。

  • 层级问题

    • 定位的元素 层级高于没定位元素

    • 都定位的元素，层级相同，显示时遵循 后来者居上（指html标签的先后顺序）

  • 堆叠顺序（z-index）

    • 不同布局方式元素的层级关系：

      • 标准流 < 浮动 < 定位

    • 不同定位之间的层级关系：

      • 相对、绝对、固定默认层级相同，此时遵循就近原则，下面的会覆盖上面的元素。

    • 在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序（z轴)

    • 特点：

      • 属性值：正整数、负整数或0，默认值是 0，数值越大，盒子越靠上；
      • 如果属性值相同，则按照书写顺序，后来居上；
      • 数字后面不能加单位。

    • 注意：

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

  • 子绝父相中的绝对定位的盒子水平居中

    • 让盒子的左侧移动到父级元素的水平中心位置；

      css
      left: 50%; 
让盒子向左移动自身宽度的一半。

margin-left: - (1/2width) px; 
transform: translate(-50%);
  二者等价，推荐使用后者！

  • 子绝父相中的绝对定位的盒子水平垂直居中

    css
    top: 50%;
left: 50%;
transform: translate(-50%,-50%);

  • 定位特殊特性

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

      • 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
      • 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

    • 前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:

      • 可以用inline-block 转换为行内块
      • 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
      • 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

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

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

    • 浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）
    • 也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

  • 绝对定位（固定定位）会完全压住盒子

    • 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
    • 但是绝对定位（固定定位） 会压住下面标准流所有的内容。
    • 浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素
定位方式属性值相对于谁移动是否占位置
静态定位static不能通过方位属性移动占位置
相对定位relative相对于自己原来的位置占位置
绝对定位absolute相对于最近的且有定位的祖先元素移动不占位置（脱标）
固定定位fixed相对于浏览器可视区域不占位置（脱标）

​

浮动与定位的特点 ​

  • 标准流

    • 行内元素 设置宽高无效

    • 块级元素 宽度不设置，默认是父元素的100%

      块级元素 高度不设置，高度由内容撑开

  • 浮动和定位

    • 行内元素设置**（绝对、固定）定位或者浮动**后，设置宽高有效果。

      • 不设置宽高，默认由内容撑开的

    • 块级元素设置**（绝对、固定）**定位或者浮动后，不设宽高，默认大小是内容的大小。

浮动或定位后的元素，默认宽度由内容撑开

浮动或定位后的行内元素，宽度和高度起作用

网页布局总结 ​

通过盒子模型,清楚知道大部分html标签是一个盒子。

通过CSS浮动、定位 可以让每个盒子排列成为网页。

一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。

  • 标准流

    • 块级元素：独占一行，从上往下，垂直布局。
    • 行内元素/行内块元素：一行显示多个，从左到右，水平布局，空间不够自动折行。

  • 浮动：可以让原本垂直布局的块级元素变成水平布局。

  • 定位：可以让元素自由的摆放在网页的任意位置。

    • 一般用于盒子之间的层叠情况。
      • 定位之后的元素层级最高，可以叠在其他盒子上面。

©2024 Dancy Su