CSS【详解】定位 position （静态定位 static -- 文档流排布、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）

最新推荐文章于 2024-09-04 22:33:02 发布

朝阳39

最新推荐文章于 2024-09-04 22:33:02 发布

阅读量1.3k

点赞数 18

分类专栏： # CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_41192489/article/details/140242430

版权

CSS 专栏收录该内容

149 篇文章 13 订阅

订阅专栏

静态定位 position: static 【默认】

此时，元素按 文档流 的方式排布：

以左上角为起点
内联元素 从左到右依次排布，当一行排不下时，自动换到下一行继续从左到右排布
块级元素 独占一行

在这里插入图片描述

此时，top、left、right、bottom、z-index 等样式无效。

相对定位 position: relative

相对于原文档流的位置，进行上下左右的偏移，因 原文档流的位置会保留，所以其他元素的位置不会被影响。

left：右移
right：左移
top：下移
bottom：上移

上方 样式的名称和实际效果的方向相反，小心出错！

在这里插入图片描述

<template>
  <p>默认定位</p>
  <button>按钮1</button><button>按钮2</button><button>按钮3</button>
  <p>相对定位</p>
  <button>按钮1</button><button class="relativeDemo">按钮2</button><button>按钮3</button>
</template>

<style scoped>
.relativeDemo {
  position: relative;
  /* 向下偏移 10 px */
  top: 10px;
}
</style>

top/bottom 同时使用的时候，bottom 无效；
left/right 同时使用的时候，right 无效
left/top/right/bottom 的样式值为百分比时，相对于父元素进行计算，而不是自身，如果父元素没有高度，则 top/bottom 无效。

绝对定位 position: absolute

依据最近一层的定位元素（position 值为 absolute/relative/fixed 的元素）定位，若无定位元素，则依据 body 定位。

position: absolute 必须配合 left,right,top,bottom 一起使用，否则元素还在原文档流的位置。

当元素依据 body 标签定位时：

top 属性为元素上边框外侧与 body 上边框内侧间的距离
bottom 属性为元素下边框外侧与 浏览器窗口下边框 内侧间的距离
left 属性为元素左边框外侧与 body 左边框内侧间的距离
right 属性为元素右边框外侧与 body 右边框内侧间的距离

在这里插入图片描述

<template>
  <p>默认定位</p>
  <button>按钮1</button><button>按钮2</button><button>按钮3</button>
  <p>绝对定位</p>
  <button>按钮1</button><button class="Demo">按钮2</button><button>按钮3</button>
</template>

<style scoped>
.Demo {
  position: absolute;
  /* 绝对定位元素下边框外侧与 浏览器窗口下边框 内侧间的距离为10px */
  bottom: 10px;
}
body {
  height: 120vh;
}
</style>

当元素依据其他定位元素定位时：

top 属性为元素上边框外侧与 定位元素 上边框内侧间的距离
bottom 属性为元素下边框外侧与 定位元素 下边框内侧间的距离
left 属性为元素左边框外侧与 定位元素 左边框内侧间的距离
right 属性为元素右边框外侧与 定位元素 右边框内侧间的距离

当 left,right,top,bottom 的值为百分比，且元素是图片时：

top 和 bottom 属性最终的值 = （定位元素的高度 - 元素的高度）* 百分比
left 和 right 属性最终的值 = （定位元素的宽度 - 元素的宽度）* 百分比

当对立方位的属性都有值时，绝对定位元素会像流体一样充满整个空间，比如 纯CSS 实现全屏遮罩

<template>
  <div class="mask"></div>
</template>

<style scoped>
/* 全屏遮罩 */
.mask {
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>

元素绝对定位后，会发生以下变化：

脱离文档流（原文档流的位置不会保留）
display 最终的值为 block/table ，但宽度不会自动撑满整行，还是由其内容决定（无法设置宽高的内联元素在绝对定位后，也可以设置宽高）

【实战】子绝父相

父元素相对定位，子元素绝对定位，常用于实现子元素重叠在父元素上。

在这里插入图片描述

<template>
  <div class="logo">
    <span class="label">EC编程俱乐部</span>
  </div>
</template>

<style scoped>
.logo {
  width: 200px;
  height: 200px;
  background-image: url('./ecLogo.jpg');
  background-size: cover;
  position: relative;
}

.label {
  color: white;
  position: absolute;
  bottom: 0px;
  width: 200px;
  text-align: center;
}
</style>

【实战】水平垂直居中

在这里插入图片描述

<template>
  <div class="parent">
    <div class="child"></div>
  </div>
</template>

<style scoped>
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}

.child {
  background-color: green;
  width: 100px;
  height: 50px;
  position: absolute;
  /* 父元素宽度的50% */
  left: 50%;
  /* 向左偏移自身宽度的一半 */
  margin-left: -50px;
  /* 父元素高度的50% */
  top: 50%;
  /* 向下偏移自身高度的一半 */
  margin-top: -25px;
}
</style>

固定定位 position: fixed

相对于浏览器窗口进行定位，无论页面如何滚动，其位置都保持不变。（IE6不兼容）

position: fixed 必须配合 left,right,top,bottom 一起使用，否则元素还在原文档流的位置。

元素固定定位后，会发生以下变化：

脱离文档流（原文档流的位置不会保留）
display 最终的值为 block/table ，但宽度不会自动撑满整行，还是由其内容决定（无法设置宽高的内联元素在绝对定位后，也可以设置宽高）

【实战】返回顶部

在这里插入图片描述

<template>
  <div>页面的顶部</div>
  <a href="#" class="backtop">返回顶部</a>
</template>

<style scoped>
.backtop {
  box-sizing: border-box;
  padding: 8px 10px;
  position: fixed;
  bottom: 60px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: gray;
  text-align: center;
  line-height: 20px;
  color: white;
  text-decoration: none; /*去掉超链接的下划线*/
}
</style>

【实战】顶部导航

在这里插入图片描述

<template>
  <div class="page">
    <nav>我是导航</nav>
    <main>页面内容</main>
  </div>
</template>

<style scoped>
.page {
  /* 页面的顶部内边距与导航的高度相同，避免导航遮挡页面内容 */
  padding-top: 60px;
}
nav {
  position: fixed;
  top: 0;
  background-color: green;
  height: 60px;
  width: 100%;
}
main {
  height: 100vh;
}
</style>