Skip to content

定位

\1) 除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 HTML 中的位置决定。

\2) 定位的基本思想很简单,它允许你定义元素相对于其正常位置应该出现的位置,或者相对于父元素甚至浏览器窗口本身的位置。

\3) 通过使用 position 属性,我们可以选择 4 种不同类型的定位。

  • position属性是把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
  • position属性的四个值分别对应 static、relative、absolute、fixed。

相对定位

  • 使用相对定位的盒子,会相对于它原来的位置,通过偏移指定的距离,到达新的位置
  • 使用相对定位的盒子,仍在标准流中,它对父块好兄弟盒子没有任何影响

① 如何设置相对定位

css
position: relative

.box {
    position: relative;
    top: 10px;
    left: 20px;
}

相对定位可以和浮动一起使用。

② 相对定位元素定位的参考点

sh
自己原来的位置

③ 相对定位元素的特点

sh
不脱离文档流,相邻元素仍然按照其原来的位置进行排列
相对定位不会改变元素原有的显示模式,可以与浮动一起设置

绝对定位

  • 使用绝对定位的盒子以它"最近"的一个"已经定位"的"祖先元素"为基准进行偏移. 如果没有已经定位的"祖先元素", 那么会以根元素 html 为基准进行定位。
  • 绝对定位的框从标准流中脱离,这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样

① 如何设置绝对定位

css
position:absolute;

.box {
    position: absolute;
    top: 10px;
    left: 20px
}

② 绝对定位元素定位的参考点

sh
1. 绝对定位元素参照它的包含块进行定位
2. 一般元素的包含块就是父元素,绝对定位元素的包含块是第一个定位的祖先元素(从父元素开始向上找),如果没有定位的祖先元素,包含块就是整个页面

③ 绝对定位元素的特点

sh
1. 脱离文档流
2. 不论元素原来的显示模式是什么,设置为绝对定位就是绝对定位元素; 同时设置浮动和绝对定位,浮动不生效。
3. 绝对定位元素具有自己的显示特点
 默认宽高都是被内容撑开,不存在外边距的塌陷和合并
 宽高内外边距都可以设置
 不会被父元素作为文本

④ 绝对定位元素的应用

css
1. 元素显示在不相关元素的上边,典型的就是导航栏的下拉菜单,这里使用绝对定位,然后使用相对定位作为父元素,不能让绝对定位到处乱跑

注意:

绝对定位的元素无法再设置浮动。

关于包含块:

绝对定位的元素其实是以他的包含块元素为基准进行定位的,但是元素 position 设置的不同,其包含块也会引起变化。

\1) 如果一个元素自身的 position 属性是 static或者是relative:它的包含块就是离他最近的祖先元素或者是格式化上下文。

\2) 如果一个元素自身的 position 属性是absolute,它的包含块就是离他最近的拥有定位属性(值不为static)的元素。

\3) 如果一个元素自身的 position 属性是 fixed,它的包含块就是离他最近的拥有定位属性(值不为static)的元素。

\4) 如果由内向外找不到包含块条件的元素,那么html(根元素)被称作为初始包含块。

固定定位

  • 以视口(viewport)为基准进行定位
  • 窗口滚动时,依然保持位置不变

① 如何设置为固定定位

css
position: fixed;
.box {
    position: fixed;
    top: 10px;
    left: 20px;
}

② 固定定位的元素定位参考点

css
1. 固定定位元素参照它的包含块进行定位
2. 固定定位元素的包含块是视口

③ 固定定位元素的特点(同绝对定位)

css
1. 脱离文档流
2. 不论元素原来的显示模式是什么,设置为固定定位就是固定定位元素; 同时设置浮动和固定定位,浮动不生效。
3. 固定定位元素具有自己的显示特点
   ① 默认宽高都是被内容撑开,不存在外边距的塌陷和合并
   ② 宽高内外边距都可以设置
   ③ 不会被父元素作为文本

定位显示层级 z-index

  • 指定一个定位的元素及其后代的层叠顺序,只有定位元素(非static值)设置 z-index 才可以生效。
  • z-index的值是数字,没有单位, 理论上来说 z-index的值大的元素会覆盖小的元素;z-index 的默认值是 auto。
1. 定位的元素默认显示层级是相同的,不论进行哪一种定位,后面的元素显示在上层; 定位元素的显示层级比不定位高。
2. 定位的可以通过 CSS 属性 z-index 设置显示层级,值是数字,可以是负值,值越大显示层级越高; 不定位的元素设置 z-index 无效!
3. 定位的元素默认父元素的显示层级是auto可以按照0来计算,但是当父元素设置了z-index,他的子元素都是父元素的显示层级。

image-20240311101615960

定位相关 CSS 属性

CSS 属性名功能属性值
position设置定位static:不定位,默认值。
relative:相对定位。
absolute:绝对定位。
fixed:固定定位
left与参照点左侧距离长度
right与参照点右侧距离长度
top与参照点上侧距离长度
bottom与参照点下侧距离长度
z-index显示层级纯数字

定位元素(绝对和固定)的默认宽高计算规则

sh
1. 定位的元素,如果没有固定宽度,同时 left right 都会生效,进而影响到默认的宽度
2. 定位的元素,如果没有固定高度,同时 top bottom 都会生效,进而影响到默认的高度

设置定位元素(绝对和固定)在包含块中水平垂直都居中

方案一:

css
position: absolute/fixed;
left: 50%;
top:50%;
margin-left: -自身总宽度(加上左右外边距)/2; (这是因为左上角的点在页面的中心位置,所以挪动自身的一半)
margin-top:-自身总高度(加上左右外边距)/2;

margin-top margin-left参照的是父元素的宽度

image-20240202094328703

方案二:

css
position: absolute/fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;