CSS基础：position定位的5个类型详解！

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

279篇原创内容-更多前端系列内容可以go公众.h：云桃桃

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

CSS 中的position属性用于控制元素的定位方式，有以下 5 个属性值：static：默认值，relative：相对定位，absolute：绝对定位，fixed：固定定位，sticky：粘性定位。

因为position是定位属性，所以要配合以下 4 个方位属性进行定位：

  1. top：距离定位父元素或包含块顶部的距离。

  2. right：距离定位父元素或包含块右侧的距离。

  3. bottom：距离定位父元素或包含块底部的距离。

  4. left：距离定位父元素或包含块左侧的距离。

这四个方位属性可以使用像素(px)、百分比(%)、em 等单位来指定距离，正负值皆可以。

需要注意的是，在使用这四个方位属性进行定位时，前提是需要设置元素的position属性值，否则方位属性不会生效。其实定位这个属性，在布局中挺常见的，比如，我圈的这些，好，那我们来看一下吧。

图片

5 个属性值

这里详细介绍一下 CSS 中的 position 属性的五个取值及其特性，以及常见的网页使用场景。

1、static（静态定位）：

  • 默认值，在文档流中按照正常顺序进行定位。这个就是咱们的正常布局。

  • 忽略 top、right、bottom 和 left 属性。

  • 常用于元素需要按照正常文档流显示的情况，不需要特殊定位的情况。

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: #e98b8b;
        position: static;
      }
    </style>
  </head>
  <body>
    <div class="box">我设置了 position: static;</div>
  </body>
</html>

2、relative（相对定位）：

  • 相对于元素在文档流中的正常位置进行定位。

  • 可以通过 top、right、bottom 和 left 属性进行微调，不会影响其他元素的位置。

  • 常用于对元素进行小幅度调整或动画效果的情况，不影响文档流。

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: #e98b8b;
        position: relative;
        left: 100px;
        top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">我设置了 position: relative; 属性</div>
  </body>
</html>

效果如下：

图片

3、absolute（绝对定位）：

  • 相对于其最近的已定位祖先元素（父元素设置了除 static 以外的定位）进行定位，如果没有已定位的祖先元素，则相对于最初的包含块（通常是页面）进行定位。

  • 不占据文档流中原有位置，元素脱离正常文档流。

  • 常用于创建悬浮层、工具提示和下拉菜单等，需要脱离文档流的情况。比如，网易的这块，我们能不能模拟一下呢，可以。这个网易云音乐首页内部圈的这块，就是相对于父级定位的。

    图片

这个使用场景还是很多的，大多情况下，absolute不直接相对于 body。我们也做一个相对于父级定位的，对一个元素来做一个定位到底部的和右上角的。

来看代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Relative and Absolute Positioning Example</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .parent {
        position: relative; /* 父级使用相对定位 */
        width: 355px;
        height: 345px;
        border: 1px solid #000;
        background-color: #ccffcc; /* 绿色背景 */
      }
      img {
        width: 100%;
        display: block;
      }
      .bottom-box {
        position: absolute; /* 子级使用绝对定位 */
        bottom: 0; /* 固定在父级的底部 */
        left: 0; /* 固定在父级的左侧 */
        width: 100%; /* 子级宽度设置为100%，以适应父级宽度 */
        height: 30px; /* 子级高度为30像素 */
        background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
        color: #fff;
        line-height: 30px;
      }
      .bottom-box p {
        padding: 0px 10px;
      }
      .right-top-icon {
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="bottom-box">
        <p>这是底部的定位</p>
      </div>
      <img src="img/img1.png" alt="" />

      <img class="right-top-icon" src="img/hot-icon1.png" alt="" />
    </div>
  </body>
</html>

效果如图：

图片

4、fixed（固定定位）：

  • 相对于浏览器窗口进行定位。

  • 页面滚动时，元素保持固定位置不变。

  • 常用于创建固定的导航栏、页脚或悬浮广告等，始终保持可见性。比如，京东的这块。

    图片

5、 sticky（粘性定位）：

  • 一开始按照正常文档流进行定位，当滚动到指定位置时变为固定定位。

  • 常用于创建吸顶的导航栏或侧边栏，在滚动到一定位置后保持可见性。比如，京东的这块：

    图片

fixed，sticky这 2 个属性，我们就直接用一个案例来演示了：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Positioning Examples</title>
    <style>
      .fixed-example {
        background-color: #ffffcc; /* 黄色背景 */
        position: fixed; /* 相对于浏览器窗口定位，无论如何滚动页面，始终停留在右侧 */
        bottom: 10%;
        right: 20px;
        width: 100px;
        height: 200px;
      }
      .fixed-example p {
        text-align: center;
      }
      .sticky-example {
        padding: 10px 20px;
        background-color: #e33131; /* 青色背景 */
        position: sticky;
        top: 20px; /* 相对于其包含块定位 */
      }
      .sticky-example a {
        padding: 10px 20px;
        margin-right: 10px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
      }
      .content {
        padding-top: 500px;
        height: 1500px; /* 确保页面足够长以展示fixed和sticky效果 */
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="sticky-example"><a href="#">这是导航1</a><a href="#">这是导航1</a><a href="#">这是导航1</a><a href="#">这是导航1</a></div>
      设置VS Code字体大小的方法如下：12 打开VS Code编辑器。 点击左上角的“文件”菜单。 选择“首选项”然后点击“设置”。 在设置页面中，点击“文本编辑器”下的“字体”。 在“Font Size”栏中的输入框里输入想要的字体大小。 设置VS Code字体大小的方法如下：12 打开VS Code编辑器。 点击左上角的“文件”菜单。 选择“首选项”然后点击“设置”。 在设置页面中，点击“文本编辑器”下的“字体”。 在“Font Size”栏中的输入框里输入想要的字体大小。 设置VS Code字体大小的方法如下：12 打开VS Code编辑器。 点击左上角的“文件”菜单。 选择“首选项”然后点击“设置”。 在设置页面中，点击“文本编辑器”下的“字体”。 在“Font Size”栏中的输入框里输入想要的字体大小。 设置VS Code字体大小的方法如下：12 打开VS Code编辑器。 点击左上角的“文件”菜单。 选择“首选项”然后点击“设置”。 在设置页面中，点击“文本编辑器”下的“字体”。 在“Font Size”栏中的输入框里输入想要的字体大小。 设置VS Code字体大小的方法如下：12 打开VS Code编辑器。 点击左上角的“文件”菜单。 选择“首选项”然后点击“设置”。 在设置页面中，点击“文本编辑器”下的“字体”。 在“Font Size”栏中的输入框里输入想要的字体大小。 设置VS Code字体大小的方法如下：12 打开VS Code编辑器。 点击左上角的“文件”菜单。 选择“首选项”然后点击“设置”。 在设置页面中，点击“文本编辑器”下的“字体”。 在“Font Size”栏中的输入框里输入想要的字体大小。
    </div>
    <div class="fixed-example">
      <p>Fixed Positioning：</p>

      <p><a href="#">为你推荐</a></p>
      <p><a href="#">客服</a></p>
      <p><a href="#">反馈</a></p>
    </div>
  </body>
</html>

效果如下。

图片

延伸！重要！遮挡元素的层叠顺序问题

有时候，当页面上有多个元素重叠在一起时（比如使用了绝对定位或固定定位），它们可能会互相遮挡。这时，就需要调整它们的层叠顺序，以确定哪个元素应该显示在上面。

那，z-index 属性主要就用于控制元素的堆叠顺序，即元素在页面上的显示顺序。

它的取值可以是正整数、负整数或 0，正整数表示元素的堆叠顺序越大，负整数表示元素的堆叠顺序越小，0 表示元素的堆叠顺序不变。

这个属性就像是，当你在一场人群聚会中，大家都在交谈，有时候你想要吸引大家的注意力，你可能会站在比较显眼的位置，比如一个高台上，这样你就能够更容易被人看到和听到。

在这个情景中，z-index 属性就像是你选择站在高台上，使得你相对于其他人更加突出和显眼，这样就容易理解了。

代码如下，你可以全都注释掉z-index属性 看其外观，然后从 1~3 一个个放开看其效果，就明白了~

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Positioning Examples</title>
    <style>
      .container {
        position: relative;
        width: 200px;
        height: 200px;
      }
      .box {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 0px;
        left: 0px;
      }
      .box1 {
        background-color: #e98b8b;
        z-index: 3;
      }
      .box2 {
        background-color: #8be999;
        z-index: 2;
      }
      .box3 {
        background-color: #3a33c3;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box box1">1 属性</div>
      <div class="box box2">2 属性</div>
      <div class="box box3">3 属性</div>
    </div>
  </body>
</html>

效果如下：

图片

OK，本文完。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/562542.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

鸿蒙OpenHarmony【轻量系统编写“Hello World”程序】 （基于Hi3861开发板）

鸿蒙OpenHarmony【轻量系统编写“Hello World”程序】 （基于Hi3861开发板）

编写“Hello World”程序 下方将通过修改源码的方式展示如何编写简单程序&#xff0c;输出“Hello world”。请在下载的源码目录中进行下述操作。 前提条件 已参考鸿蒙开发指导文档&#xff1a;gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到…
阅读更多...
QT中的OpenGL学习-----3D图形

QT中的OpenGL学习-----3D图形

一、3D坐标系 记住V_clip M_projection * M_view * M_model * V_local就行&#xff0c;可以在顶点着色器里面添加位置信息&#xff1a; #version 330 core layout (location 2) in vec3 aPos;//location属性位置有16个 layout (location 3) in vec3 aColor; layout (locati…
阅读更多...
基础算法前缀和与差分

基础算法前缀和与差分

前言 本次博客会介绍一维和二维的前缀和&#xff0c;以及一维二维差分的基本使用&#xff0c;尽量画图&#xff0c;多使用配合文字 使大家理解&#xff0c;希望有所帮助吧 一维前缀和 问题描述 这里有一个长度为n的数组&#xff0c;我们要算出【2,5】区间的元素和 暴力思…
阅读更多...
linux定时备份数据库sql文件（表格、视图、存储过程，已保存的查询语句不会被备份）

linux定时备份数据库sql文件（表格、视图、存储过程，已保存的查询语句不会被备份）

创建一个脚本文件xxx.sh 为其设置全部权限chmod 777 xxx.sh #!/bin/bash # 设置备份目录和文件名 current_time$(date "%Y%m%d_%H%M%S") backup_dir"/root/db_back/db" backup_file"$backup_dir/db_ship_backup_$current_time.sql" log_file&…
阅读更多...
【JavaEE初阶】网络原理|认识协议|协议分层|TCP/IP模型|封装和分用

【JavaEE初阶】网络原理|认识协议|协议分层|TCP/IP模型|封装和分用

一、认识协议 1.概念 简单来说&#xff1a;就是一种通信双方&#xff0c;对于通信规则的约定&#xff08;标准&#xff09;&#xff0c;一定是通信双方都认可的 但是这个协议不一定是认可面非常广的&#xff0c;即使是两个人之间的也可叫做协议 就好⽐⻅⽹友&#xff0c;彼此…
阅读更多...
Docker搭建项目管理软件禅道

Docker搭建项目管理软件禅道

文章目录 一、简介二、部署三、使用 一、简介 禅道是以项目管理为核心的协作平台&#xff0c;旨在帮助团队高效地进行项目管理和协作。 禅道提供了项目管理、任务管理、团队协作、文档管理、报告统计等功能。 禅道官网 二、部署 操作系统&#xff1a;22.04.4 创建文件夹 …
阅读更多...
Linux驱动开发——（三）并发与竞争

Linux驱动开发——（三）并发与竞争

目录 一、并发与竞争简介 二、原子操作 2.1 原子操作简介 2.2 原子整形操作API 2.3 原子位操作API 2.4 原子操作驱动代码 三、自旋锁 3.1 自旋锁简介 3.2 自旋锁API 3.3 自旋锁驱动代码 四、信号量 4.1 信号量简介 4.2 信号量API 4.3 信号量驱动代码 一、并发与…
阅读更多...
Redis-cluster集群架构

Redis-cluster集群架构

一、集群架构 上述集群架构师一个由多个主从节点群组成的分布式服务器&#xff0c;具有复制、高可用和分片的特性。Redis集群不需要sentine哨兵也能完成节点移除和故障转移。官方文档称可以扩展上万个节点。推荐不超过1000个&#xff1b;从节点只担任备份的角色&#xff0c;不承…
阅读更多...
JavaWeb过滤器

JavaWeb过滤器

Javaweb过滤器是一种用于在Servlet处理请求之前或之后对请求进行预处理或后处理的组件。过滤器可以用于拦截请求、修改请求参数、过滤响应内容等操作。其主要作用包括&#xff1a; 拦截请求&#xff1a;过滤器可以拦截客户端请求&#xff0c;对请求进行验证、过滤或修改&#x…
阅读更多...
STL-list的使用及其模拟实现

STL-list的使用及其模拟实现

在C标准库中&#xff0c;list 是一个双向链表容器&#xff0c;用于存储一系列元素。与 vector 和 deque 等容器不同&#xff0c;list 使用带头双向循环链表的数据结构来组织元素&#xff0c;因此list插入删除的效率非常高。 list的使用 list的构造函数 list迭代器 list的成员函…
阅读更多...
【Interconnection Networks 互连网络】Dragonfly Topology 蜻蜓网络拓扑

【Interconnection Networks 互连网络】Dragonfly Topology 蜻蜓网络拓扑

蜻蜓拓扑 Dragonfly Topology 1. 拓扑参数2. Topology Description 拓扑描述3. Topology Variations 拓扑变体 蜻蜓拓扑 Dragonfly Topology 1. 拓扑参数 Dragonfly拓扑参数&#xff1a; N N N: 网络中终端(terminal)的总数量 p p p: 连接到每个路由器的终端数量 a a a: 每…
阅读更多...
Go语言并发控制

Go语言并发控制

channel // cancelFn 数据通道关闭通知退出 func cancelFn(dataChan chan int) {for {select {case val, ok : <-dataChan:// 关闭data通道时&#xff0c;通知退出// 一个可选是判断data指定值时退出if !ok {fmt.Printf("Channel closed &#xff01;&#xff01;&…
阅读更多...
Rest接口/Nginx日志记录和采集

Rest接口/Nginx日志记录和采集

文章目录 一、Rest接口日志二、Nginx日志三、采集日志四、夜莺查看Nginx日志五、夜莺查看Rest接口日志 一、Rest接口日志 记录日志字典定义 接口URL接口名称,类别,入参全记录,出参全记录,入参字段1:中文名1/入参字段2:中文名2,出参字段1:中文名1/test/api/login账户登录,登录…
阅读更多...
java-单列集合List详解

java-单列集合List详解

一、List概述 ​​​​​​​List 接口继承自 Collection 接口。这意味着所有 List 类型的对象都是 Collection 类型的对象&#xff0c;它们共享 Collection 接口中定义的所有方法。 List集合的特点&#xff1a; 1、有序&#xff1a;存和取得元素顺序一致 2、有索引&#xf…
阅读更多...
Java- Object根父类

Java- Object根父类

在java中&#xff0c;所有的类都有一个公共的父类&#xff0c;这个java.lang.Object类 * * * Object所有类的根&#xff0c;成为超类。 1.证明Object是根 public class A_Object01 {public static void main(String[] args) {//证明Object是根//基本数据类型int a 0;Object…
阅读更多...
【硬十宝典】——1.4【基础知识】电源完整性——理解与设计

【硬十宝典】——1.4【基础知识】电源完整性——理解与设计

定义&#xff1a; 电源完整性&#xff08;Power integrity&#xff09;简称PI&#xff0c;是确认电源来源及目的端的电压及电流是否符合需求。 电源完整性在现今的电子产品中相当重要。有几个有关电源完整性的层面&#xff1a;芯片层面、芯片封装层面、电路板层面及系统层面。…
阅读更多...
18-Echarts 配置系列之：数据集 dataset

18-Echarts 配置系列之：数据集 dataset

简介&#xff1a; 数据集&#xff08;dataset&#xff09;是专门用来管理数据的组件。简化在每一个系列中设置数据&#xff0c;这一个配置是在Echarts4 中开始支持。 通过数据集配置&#xff0c;避免为每一个系列创建一个数据&#xff0c;避免格式转化的痛苦。 简单举例&…
阅读更多...
开启智慧之旅，AI与机器学习驱动的微服务设计模式探索

开启智慧之旅，AI与机器学习驱动的微服务设计模式探索

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 &#x1f680; 转载自热榜文章&#x1f525;&#xff1a;探索设计模式的魅力&#xff1a;开启智慧…
阅读更多...
2024年腾讯云免费服务器最新申请入口链接

2024年腾讯云免费服务器最新申请入口链接

腾讯云免费服务器申请入口 txybk.com/go/free 免费服务器可选轻量应用服务器和云服务器CVM&#xff0c;轻量配置可选2核2G3M、2核8G7M和4核8G12M&#xff0c;CVM云服务器可选2核2G3M和2核4G3M配置&#xff0c;腾讯云百科txybk.com分享2024年最新腾讯云免费服务器申请入口、限制…
阅读更多...
YOLOv8操作指南-下载+配置环境

YOLOv8操作指南-下载+配置环境

下载&#xff1a;github&#xff0c;进入搜索YOLOv8 就这个&#xff0c;点开 下载就可以了&#xff0c;然后解压一下 配置环境&#xff1a; 安装Pytorch 先看一下这个&#xff1a; 如果电脑有GPU的话&#xff1a; 判断自己电脑GPU&#xff1a;打开任务管理器 我的是英伟达3…
阅读更多...
最新文章

Copyright @ 2022~2023