十分钟轻松搞懂CSS的五大定位方式！（建议收藏）

你脸上有BUG

已于 2023-03-08 14:53:12 修改

阅读量2k

点赞数 2

分类专栏： HTML/CSS 文章标签： html css html5 定位布局

于 2021-05-31 18:52:29 首次发布

本文链接：https://blog.csdn.net/qq_29493173/article/details/117423124

版权

HTML/CSS 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

文章目录

一、CSS之position定位方式
二、z-index

一、CSS之position定位方式

position 属性规定元素的定位类型，有以下五种：

static
relative
absolute(脱离文档流)
fixed（脱离文档流）
sticky（新属性）

两种脱离正常文档流的定位方法，会把元素的宽高设置成内容的宽高

常用 top/bottom/left/right 属性进行偏移

1.static

静态定位，是position的默认值，可不设置。
默认布局方式，从上到下，从左到右，正常文档流。
position: static;
在这里插入图片描述

2.relative

相对定位
在确定元素的默认位置之后，通过top/bottom/left/right设置偏移
偏移后，元素所占的空间保留原位，其他元素不会挤占原来空间

有三个并列在一行的盒子，将中间的一个盒子position设为relative，
且 “left: 50px; top: 15px;” 意为在原位置的基础上，距左边再偏移50px，距顶部再偏移15px

<style>
.box {
    width: 150px;
    height: 150px;
    background-color: rgb(69, 172, 0);
    margin: 10px;
    display: inline-block;
  }
  
  .box2 {
    background-color:rgb(47, 64, 160);
    position: relative;
    left: 50px;
    top: 15px;
}
</style>
  
<div class="container">
    <div class="box">box1</div>
    <div class="box box2">box2</div>
    <div class="box">box3</div>
</div>

偏移前：
在这里插入图片描述
偏移后结果图：（黑框为蓝色box2原位置）

3.absolute（脱离正常文档流）

绝对定位，把元素移出正常的文档流。
后面的元素会挤占它的空间，自己则会覆盖在挤占他空间的元素上方。

可以使用top/bottom/left/right偏移，但这些属性是相对于包含它的元素来偏移的。

包含元素：

如果这个元素的所有父级元素都没有设置position/transform/perspective属性，那么包含元素就是包含HTML元素的容器，即浏览器的窗口，这时相对浏览器左上角进行偏移；例如：

示例： box2设置绝对元素，但任意父级元素都没有设置position/transform/perspective属性，这时就会相对浏览器左上角进行位移：

<style>
.box {
 width: 150px;
 height: 150px;
 background-color: rgb(69, 172, 0);
 margin: 10px;
 display: inline-block;
}

.box2 {
 background-color: rgb(47, 64, 160);
 position: absolute;
 left: 50px;
 top: 15px;
}
</style>  

<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<div class="container">
	<div class="box">box1</div>
    <div class="box box2">box2</div>
 	<div class="box">box3</div>
</div>

偏移结果如图：可以看到box2的原位置已经被挤占，且以浏览器左上角进行偏移
在这里插入图片描述

如果父级元素中包含position/transform/perspective属性，那么包含元素就是离他最近的设置了的元素，是相对父级元素的判定盒子边界进行位置偏移的。

盒子边界：内边距与边框的交界处
通常使用relative来设置包含元素，不会影响正常的文档流

示例：在.container加上transform属性，此时box2设置absolute，最近的包含元素就是container，故box2所以相对container进行偏移

<style>
.container_ {
  transform: translateX(0);
  /*为方便观察，加上边框*/
  border:gray 1px solid;
}

.box_ {
  width: 150px;
  height: 150px;
  background-color: rgb(69, 172, 0);
  margin: 10px;
  display: inline-block;
}

.box2_ {
  background-color: rgb(47, 64, 160);
  /*.container有transform，所以相对.container进行偏移*/
  position: absolute;
  left: 50px;
  top: 15px;
}
</style>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<div class="container_">
  <div class="box_">box1</div>
  <div class="box_ box2_">box2</div>
  <div class="box_">box3</div>
</div>

偏移结果如下：
在这里插入图片描述

4.fixed（脱离正常文档流）

固定定位，无论页面怎么滚动都会固定在同一个位置，适用固定浮窗、导航条

left:0;right:0; 宽度占满容器，若设置top:0则在最顶，bottom:0最底部
bottom:0;top:0; 高度占满容器，若设置left:0则在最左边，right:0最右

<style>
#bottom {
  background-color: green;
  position: fixed;
  /*left、right为0，占满容器宽度*/
  bottom: 0;
  left:0;
  right:0;
}

#right {
  background-color: rgb(168, 255, 168);
  position: fixed;
  /*top、bottom为0，占满容器高度*/
  right:0;
  top: 0;
  bottom: 0;
  opacity: 0.5;
}
</style>

<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<footer id = "bottom">浮动在最下侧</footer>
<footer id = "right">浮动在最右侧</footer>

在这里插入图片描述

5.sticky

新属性，relative和fixed结合体。
top:0 滚动时元素离窗口一定位置时，把它变成固定在顶部，其他元素还在正常的文档流中

<style>
nav {
  background-color: blue;
  position: sticky;
  top: 0;
}
</style>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<nav>导航栏</nav>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>

固定前：
在这里插入图片描述
固定后：

二、z-index

设置z轴方向的偏移，默认值为0。
z-index:0
可设置正/负数，数值越大，显示在越前。
在这里插入图片描述

若在一个包含元素中有两个absolute元素交叠，那么后定义的元素会覆盖先定义的元素。
若要先定义的元素在前，可设置z-index数值实现，示例：

<style>
.container {
  transform: translateX(0);
}
.box {
  width: 150px;
  height: 150px;
  background-color: rgb(69, 172, 0);
  margin: 10px;
  display: inline-block;
}
.box1 {
  position: relative;
  z-index: 10;//显示在前
}
.box2 {
  background-color: rgb(47, 64, 160);
  position: absolute;
  left: 50px;
  top: 15px;
}
</style>

<div class="container">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
</div>

默认情况：
在这里插入图片描述

z-index后：
在这里插入图片描述

若两个包含元素，且那么堆叠顺序是按照包含元素的z-index显示

你脸上有BUG

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
十分钟轻松搞懂CSS的五大定位方式！（建议收藏）

一、CSS之position定位方式position 属性规定元素的定位类型，有以下五种：staticrelativeabsolute(脱离文档流)fixed（脱离文档流）sticky（新属性）两种脱离正常文档流的定位方法，会把元素的宽高设置成内容的宽高常用 top/bottom/left/right 属性进行偏移1.static静态定位，是position的默认值，可不设置。默认布局方式，从上到下，从左到右，正常文档流。position: static;2.relative
复制链接

扫一扫