当前位置： 首页 > news >正文

CSS 绝对定位 position:absolute

news 2025/9/10 11:24:01

什么是CSS绝对定位absolute定位？

绝对定位absolute定位是CSS中的一种定位方式，可以将元素精确定位到一个确定的点，这与元素在文档流上的自然位置无关。相比起其他定位方式，绝对定位很灵活性，它可以将元素脱离文档流，使得元素的位置不受页面上其他元素的影响。相应地，元素独立悬浮于页面上。

 

实现过程

在CSS中使用绝对定位absolute定位需要使用position属性，值为absolute。并且，还需要使用top、left、bottom、right这4个属性之一来设置元素的位置。四个属性的设置说明如下：

  • top：元素上边缘的距离顶部边缘的距离，单位可以是px、em或%；
  • left：元素左边缘的距离左边沿的距离，单位可以是px、em或%；
  • bottom：元素下边缘的距离底部边界的距离，单位可以是px、em或%；
  • right：元素右边缘的距离右边缘的距离，单位可以是px、em或%。

其中，top和left属性决定了元素的左上角的位置，bottom和right属性决定了元素的右下角的位置。需要注意的是，在使用这些属性时，要确保元素的父元素也是定位的，且父元素的position属性不是static。

.login-card{position: absolute;left: 30%;top: 30%;width: 450px;
}

 

 

代码示例

下面展示一个使用CSS绝对定位absolute定位的例子，这个例子是创建一个浮动在页面右下角的帮助按钮。

<!DOCTYPE html>
<html>
<head><title>使用CSS绝对定位absolute定位</title><style>/* 使用CSS样式定义帮助按钮 */.help {display: block;position: absolute;bottom: 10px;right: 10px;background-color: #4CAF50;color: white;padding: 10px 15px;font-size: 16px;border-radius: 5px;text-align: center;text-decoration: none;}</style>
</head>
<body><a href="#" class="help">帮助</a>
</body>
</html>

在上述代码中，.help样式定义制定了help类，其中使用了position属性来设置元素的定位方式并设置bottom和right属性值分别为10px，以使元素处于页面的右下角。定义了一些其他的CSS样式来使它看起来像一个漂亮的帮助按钮。

 

总结：

绝对定位absolute定位是CSS中非常有用的一种定位方式。可以将页面中的元素完全脱离文档流，并精确地定位在需要的位置。使用CSS绝对定位absolute定位的常见场景包括悬浮菜单、对话框、图片轮播、工具提示等等。

相关文章：

CSS 绝对定位 position:absolute

什么是CSS绝对定位absolute定位&#xff1f; 绝对定位absolute定位是CSS中的一种定位方式&#xff0c;可以将元素精确定位到一个确定的点&#xff0c;这与元素在文档流上的自然位置无关。相比起其他定位方式&#xff0c;绝对定位很灵活性&#xff0c;它可以将元素脱离文档流&am…...

编程日记 2024/3/18 19:00:44

鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：RelativeContainer）

相对布局组件&#xff0c;用于复杂场景中元素对齐的布局。 说明&#xff1a; 该组件从API Version 9开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 规则说明 容器内子组件区分水平方向&#xff0c;垂直方向&#xff1a; 水平方向为left&…...

编程日记 2024/3/18 18:59:42

Android制作微信添加多个图片，放大图片

1.添加依赖 implementation com.github.bumptech.glide:glide:4.12.0 //裁剪图片等等 implementation androidx.recyclerview:recyclerview:1.1.0 //recycleview依赖 2.使用recycleview <androidx.recyclerview.widget.RecyclerViewandroid:id"id/recyclerView"…...

编程日记 2024/3/18 18:58:41

iOS runtime理解和应用场景

一、runtime的动态性 OC的运行时系统（Runtime System）提供了丰富的动态特性，包括类与对象的创建、消息发送与转发、方法的动态添加与替换、属性的动态合成等。通过使用运行时库提供的API，可以在运行时获取和操作类与对象的信息，实现各种动态性的功能。 我对 Runtime 的理…...

编程日记 2024/3/18 18:54:37

画图实战-Python实现某产品全年销量数据多种样式可视化

画图实战-Python实现某产品全年销量数据多种样式可视化 学习心得Matplotlib说明什么是Matplotlib&#xff1f;Matplotlib特性Matplotlib安装 产品订单量-折线图某产品全年订单量数据数据提取和分析绘制折线图 产品订单&销售额-条形图某产品全年订单&销售额数据绘制条形…...

编程日记 2024/3/18 18:53:36

YOLOv9详解

1.概述 在逐层进行特征提取和空间转换的过程中&#xff0c;会损失大量信息&#xff0c;例如图中的马在建模过程中逐渐变得模糊&#xff0c;从而影响到最终的性能。YOLOv9尝试使用可编程梯度信息PGI解决这一问题。 具体来说&#xff0c; PGI包含三个部分&#xff0c;&#xff0…...

编程日记 2024/3/18 18:49:31

CRON 定时任务

检测是否安装了 cron systemctl status crond 如果没有安装使用 sudo yum install cronie 编辑 crontab -e * * * * * php /path/your.php Esc键 然后输入 :q 退出 :wq 保存并退出 第一个 * 表示分钟&#xff0c;表示每分钟执行一次。第二个 * 表示小时&#xff0c;表示每…...

编程日记 2024/3/18 18:48:31

环境安装篇 之 Kind 搭建 kubernetes 测试集群

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 环境安装 系列文章&#xff0c;介绍 使用Kind工具 快速安装 kubernetes 测试集群的详细步骤 1.Kind简介 Kind 是一个使用 Docker 容器“节点”运行本地 Kubernetes 集群的工具。Kind 主要用于测试kubernetes本…...

编程日记 2024/3/18 18:45:27

每日五道java面试题之mybatis篇（四）

目录&#xff1a; 第一题. 映射器#{}和${}的区别第二题. 模糊查询like语句该怎么写?第三题. 在mapper中如何传递多个参数?第四题. Mybatis如何执行批量操作第五题 MyBatis框架适用场景 第一题. 映射器#{}和${}的区别 #{}是占位符&#xff0c;预编译处理&#xff1b;${}是拼接…...

编程日记 2024/3/18 18:44:26

camunda流程引擎的插件如何使用

camunda工作流引擎是一个开放的架构&#xff0c;除了流程引擎默认提供的功能外&#xff0c;开发者可以通过流程插件机制&#xff0c;对流程引擎功能进行扩展。即流程引擎插件是流程引擎配置的扩展。插件必须提供 ProcessEnginePlugin 接口的实现。 下面以全局任务事件监听器为…...

编程日记 2024/3/18 18:36:16

Vue打包问题汇总：legacy、runtime.js

问题一&#xff1a;Vue3.x的版本中build后dist文件中出现legacy的js文件 解决办法是添加兼容的浏览器 package.json "browserslist": ["> 1%","last 2 versions","not dead","not ie 11" ]参考 Vue3.x的版本中build后…...

编程日记 2024/3/18 18:34:14

挑战杯 车位识别车道线检测 - python opencv

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习 机器视觉 车位识别车道线检测 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满分5分) …...

编程日记 2024/3/18 18:33:13

c++面经

1. 僵尸进程 僵尸进程&#xff08;Zombie Process&#xff09;在操作系统中指的是那些已经执行完毕&#xff0c;但其父进程尚未对其进行善后处理&#xff08;例如读取子进程的状态信息或者执行回收资源的操作&#xff09;的进程。在Unix和类Unix系统&#xff0…...

编程日记 2024/3/18 18:32:12

js中副作用的消除还解决了并行计算带来的竞争问题，具体是如何解决的

在JavaScript中&#xff0c;副作用是指对外部环境产生的可观察的变化&#xff0c;例如修改全局变量、修改DOM元素等。副作用的存在可能导致代码的可维护性和可测试性下降&#xff0c;并且在并行计算中可能引发竞争问题。 不纯的函数有可能访问同一块资源&#xff0c;如果先后调…...

编程日记 2024/3/18 18:31:10

3/14/24数据结构、线性表

目录 数据结构 数据结构三要素 逻辑结构 存储结构 数据运算 时间复杂度 空间复杂度 线性表 线性表定义 静态分配 动态分配 线性表插入 线性表删除 十天的时间学完了C语言督学课程&#xff0c;最后终于是可以投入到408的科目学习当中。关于数据结构和算法的学习很多部…...

编程日记 2024/3/18 18:28:06

软件测试面试200问，面试看这就够了。。。

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 Part1 1、你的测试职业发展是什么&#xff1f; 测试经验越多&#xff0c;测试能力越高。所以我…...

编程日记 2024/3/18 18:26:04

力扣● 583. 两个字符串的删除操作 ● 72. 编辑距离 ● 编辑距离总结篇

● 583. 两个字符串的删除操作 注意审题&#xff1a; 给定两个单词 word1 和 word2 &#xff0c;返回使得 word1 和 word2 相同所需的最小步数。 每步 可以删除任意一个字符串中的一个字符。 删除最少的字符使两者相同&#xff0c;说明留下来的就是最大公共子序列。不要求…...

编程日记 2024/3/18 18:24:02

Git速成

文章目录 Git 分布式版本控制工具课程内容1. 前言1.1 什么是Git1.2 使用Git能做什么 2. Git概述2.1 Git简介2.2 Git下载与安装 3. Git代码托管服务3.1 常用的Git代码托管服务3.2 码云代码托管服务3.2.1 注册码云账号3.2.2 登录码云3.2.3 创建远程仓库3.2.4 邀请其他用户成为仓库…...

编程日记 2024/3/18 18:17:54

一文看懂softmax loss

文章目录 softmax loss1.softmax函数2.交叉熵损失函数3.softmax loss损失函数&#xff08;重点&#xff09;4.带有temperature参数的softmax loss参考 softmax loss 1.softmax函数 softmax函数是一种常用的激活函数&#xff0c;通常用于多分类任务中。给定一个向量&#xff0…...

编程日记 2024/3/18 18:15:52

用C语言链表实现图书管理

#include <stdio.h> #include <stdlib.h> #include <string.h> struct ListNode {int val;//编号char title[50];//书名float price;//价格struct ListNode* next; };// 在尾部插入节点 struct ListNode* insertAtTail(struct ListNode* head, int val,char …...

编程日记 2024/3/18 18:14:51

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/9/9 12:55:37

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/9/9 5:40:10

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/9/7 2:07:56

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/9/2 16:07:10

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/8/9 2:59:35

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2025/7/22 6:12:57

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2025/9/3 15:40:48

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2025/9/2 18:36:21

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/8/11 22:22:05

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

编程新知 2025/9/7 8:49:35