【自学CSS笔记第12篇】——CSS三种定位方式

目录

什么是css定位

css position 属性

static 属性值

relative，absolute，fixed属性值的相同点：

relative 属性值

absolute 属性值

fixed 属性值

---

什么是css定位

在css中，定位的意思是指定一个元素在网页上的位置，一般使用position属性来设置。css有5种定位方式，即position属性主要有五个属性值。

• 静态定位（static）
• 绝对定位（absolute）
• 相对定位（relative）
• 固定定位（fixed）
• 粘性定位（sticky）

提示：本文主要介绍前四个，因为第五个我暂时还没学；

css position 属性

position 属性用于指定元素在文档中的定位方式，可以将元素放置到一个静态的（static）或相对的（relative）、绝对的（absolute）、或固定的（fixed）位置上。top、bottom、right和left属性则决定了该元素的最终位置。

通过以上position 属性介绍，我们可以选择 4 种不同类型的属性值。含义如下：

• static
• 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
• relative
• 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
• absolute
• 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
• fixed
• 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

static 属性值

static是position属性的默认值。如果省略position属性，也就是不写position属性的情况下，浏览器就认为该元素是static定位。

这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。（意思也就是说你设置static的效果相当于没设置）

注意：static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。

relative，absolute，fixed属性值的相同点：

relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。他们三个都是基于某个点去发生位移，所以他们三个就需要配合top、bottom、right和left属性一同使用，最终确定元素的位置；

这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。

relative 属性值

relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。

总结：设置了relative的元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。

absolute 属性值

absolute表示，相对于上级元素（一般是父元素，当然也可以是爷爷辈的元素）进行偏移，即定位基点是父元素。

总结：设置了absolute的元素会脱离文档流，它有一个重要的限制条件：定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。

fixed 属性值

fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。我们平常浏览的网页上的导航栏就是fixed的；