关于css:css定位的五种方式

依据学习别人的材料，本人整顿下笔记，坚固下 css 中五种定位形式知识点，温故知新，一直在工作中晋升自我。

position 属性的五个值：

static
relative
fixed
absolute
sticky（粘性定位）

上面间接上图和代码举例：

html 外面所有元素的 position 的默认值都是 static，static 会追随 html 排版的流程挪动。static 对于 top，left，right，bottom 设定值不会失效。

比方我在 static 的 div 下面放了一个高度 120px 的 div，则 static 属性 div 会被挤下去。

<div class="height"></div>
<div class="static"></div>

.static{
  position:static;
  width:360px;
  height:360px;
}
.height{
  width:750px;
  height:120px;
}

相对定位，元素会它最近的一个父类容器去定位，该父类容器 position 的值必须是：relative、absolute、fixed，若没有这样的父元素，则该元素会绝对于 body 进行定位。

相对定位偏移值由其 top、bottom、left、right 值确定。

而相对定位的元素若超出其父元素的边界，要想将溢出的局部暗藏，则想暗藏在哪个父类里，该父类必须同时设置 position 为 relative/absolute/fixed 中一种，并且 overflow 须要设定为 hidden。

看以下例子：

<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="absolute"></div>

.height{
  width:750px;
  height:120px;
}
.absolute{
  position:absolute;
  width:240px;
  height:240px;
  right:80px;
  bottom:60px
}

从上图看，absolute 定位并不会受到到 height 元素排版影响。

咱们在多复制几份 height 元素，让页面呈现滚动轴，这时候会发现 absolute 元素会随滚动轴滚动。

另外，如下图，如果咱们把 absolute 元素嵌套入 absolute 元素中，则最里层的 div 会依据父层的 absolute 元素的地位去定位。正好印证了下面说的元素会它最近的一个父类容器去定位，该父类容器 position 的值必须是：relative、absolute、fixed，若没有这样的父元素，则该元素会绝对于 body 进行定位。

<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="absolute">
  <div class="absolute"></div>
</div>

relative 和 static 很类似，都会追随 html 排版流程挪动，但它比 static 多了 top，left，right，bottom 的设定。即它是追随 html 排版流程定位之外，还会透过 top，left，right，bottom 去调整地位。以下举例：

<div class="height"></div>
<div class="relative"></div>

.height{
  width:750px;
  height:120px;
}
.relative{
  position:relative;
  width:360px;
  height:360px;
  top:60px;
  left:150px;
}

从上图高深莫测，relative 元素追随了 height 的排版而浮动了，并且依据 top 和 left 来进行定位。

减少了一个 div，relative 元素向下挪动。

<div class="height"></div>
<div class="height"></div>
<div class="relative"></div>

relative 最重要一个性能就是在他外面的子元素，如果定位形式是 absolute，则子元素会依据 relative 的地位去定位。

<div class="height"></div>
<div class="height"></div>
<div class="relative">
  <div class="absolute"></div>
</div>

.height{
  width:750px;
  height:120px;
}
.relative{
  position:relative;
  width:360px;
  height:360px;
  top:60px;
  left:150px;
}
.absolute{
  position:absolute;
  width:240px;
  height:240px;
  right:80px;
  bottom:60px;
}

从这张图看，咱们会发现 absolute 子元素的 right 和 bottom 是依据 relative 元素的地位去定位的。这在平时我的项目中十分罕用。

而如果你将 relative 元素替换为 static，则会发现 absolute 元素齐全忽视 static 元素。

<div class="height"></div>
<div class="height"></div>
<div class="static">
  <div class="absolute"></div>
</div>


.height{
  width:750px;
  height:120px;
}
.static{
  position:static;
  width:360px;
  height:360px;
}
.absolute{
  position:absolute;
  width:240px;
  height:240px;
  right:80px;
  bottom:60px;
}

fixed 和 absolute 很类似，不同中央有两点：

fixed 会定位到屏幕中的固定地位，所以即便滚动页面，fixed 也会始终放弃在那个地位。
如果 fixed 元素设定了 top，left，right，bottom 属性，那么它即便放在 relative 外面，fixed 也会依据页面，即 body 去定位，而不会依据 relative 元素去定位。

<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="fixed"></div>

.height{
  width:750px;
  height:120px;
}
.fixed{
  position:fixed;
  width:240px;
  height:240px;
  left:80px;
  bottom:60px;
}

先看下图，咱们把 fixed 元素嵌套入 relative 元素中，并没设定 top，left，right，bottom 属性，这时候 fixed 元素会依据父元素 relative 排版

<div class="height"></div>
<div class="relative">
  <div style="background-color:red;width:50px;height:50px;position:fixed" ></div>
</div>

.height{
  width:750px;
  height:120px;
}
.relative{
  position:relative;
  width:360px;
  height:360px;
  top:60px;
  left:150px;
}

而一旦 fixed 元素设定了 top，left，right，bottom 属性，那么它即便放在 relative 外面，fixed 也会依据页面，即 body 去定位，而不会依据 relative 元素去定位

<div class="height"></div>
<div class="relative">
  <div style="background-color:red;width:50px;height:50px;position:fixed;top:50px;left:10px;" ></div>
</div>

sticky 是 css 定位新增的一个属性；能够说是绝对定位 relative 和固定定位 fixed 的联合；

它次要用在对 scroll 事件的监听上，简略说在滑动过程中，某个元素的间隔其父元素的间隔达到 sticky 粘性定位要求时；

position:sticky 这时的成果就绝对于 fixed 定位，固定到适当的地位。

如图，咱们多增加 height 元素，并直至呈现滚动轴。

<div class="height"></div>
<div class="height"></div>
<div class="sticky"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>

.height{
  width:750px;
  height:120px;
}
.sticky{
  position:sticky;
  width:240px;
  height:90px;
  top:0;
}

当咱们滑动滚动轴页面上移后，当 sticky 元素触到页面顶部时候，就会固定在顶部。固定到顶部起因是咱们将他的 top 设定为 0。所以当 top 与上方相间隔 0px 时就会触发。如下图：

sticky 粘性定位能够较少代码实现弹性固定场景，比方导航栏。然而兼容性来看，因为是 css 新属性，目前还比拟差。咱们能够参考以下浏览器兼容性图发现，浏览器也是从 2014 年开始缓缓反对的

对于 css 中定位的五种形式就介绍结束了。

最初很感激 B 站 Codingstartup 的 Steven 学习视频。依据他的视频和素材联合我本人了解整顿的笔记，用来在工作中一直坚固和晋升本人。

关于css:css定位的五种方式

position

static

absolute

relative

fixed

sticky（粘性定位）

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）