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

CSS 绝对定位 position:absolute

news 2026/3/30 13:13:00

什么是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

Mac Mouse Fix终极指南：让你的第三方鼠标在macOS上焕发新生

Mac Mouse Fix终极指南&#xff1a;让你的第三方鼠标在macOS上焕发新生 【免费下载链接】mac-mouse-fix Mac Mouse Fix - A simple way to make your mouse better. 项目地址: https://gitcode.com/GitHub_Trending/ma/mac-mouse-fix 还在为macOS上第三方鼠标功能受限而…...

编程新知 2026/3/30 12:46:18

智能缓存加速：重新定义扩散模型推理效率

智能缓存加速&#xff1a;重新定义扩散模型推理效率 【免费下载链接】ComfyUI-TeaCache 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-TeaCache 在AI创作领域&#xff0c;等待成为最大的创作阻力。当你使用扩散模型生成图像或视频时&#xff0c;是否曾因漫长的…...

编程新知 2026/3/30 12:30:14

Electron打包踩坑实录：从icon报错到网络卡顿，手把手教你用electron-builder搞定Windows安装包

Electron实战打包指南&#xff1a;从图标优化到网络加速的全流程解决方案 Electron作为跨平台桌面应用开发框架&#xff0c;其打包环节往往是开发者遇到问题最集中的阶段。本文将系统梳理从基础配置到高级优化的完整打包流程&#xff0c;特别针对Windows平台下electron-builde…...

编程新知 2026/3/30 10:28:16

香农信息熵的5个常见误区：你以为的熵可能不是真正的熵

香农信息熵的5个常见误区&#xff1a;你以为的熵可能不是真正的熵 在机器学习与数据科学领域&#xff0c;香农信息熵&#xff08;Shannon Entropy&#xff09;常被视为衡量数据不确定性的黄金标准。但有趣的是&#xff0c;许多从业者在使用这一概念时&#xff0c;往往陷入一些…...

编程新知 2026/3/30 10:01:59

遥感图像质量评价实战：用imgvision 1.7.3计算SAM、ERGAS等指标（附Python代码）

遥感图像质量评估实战&#xff1a;从理论到代码的完整指南 遥感图像处理是地理信息系统、环境监测和农业估产等领域的关键技术。当我们对高光谱图像进行压缩、融合或重建时&#xff0c;如何客观评价处理后的图像质量&#xff1f;本文将深入探讨五种核心评价指标(SAM、PSNR、MSE…...

编程新知 2026/3/30 9:33:52

ESP8266配网总失败？详解AirLink和SoftAP两种模式在机智云项目中的实战区别与选择

ESP8266配网失败全解析&#xff1a;从AirLink到SoftAP的深度诊断手册 配网失败时&#xff0c;ESP8266的红色LED灯常亮像在嘲笑你的无能——这可能是物联网开发者最熟悉的挫败感。当机智云项目卡在最后10%的配网环节&#xff0c;那种"硬件没问题、代码没报错&#xff0c;但…...

编程新知 2026/3/30 9:27:51

ReflectiveDLLInjection实战：从源码编译到进程注入完整流程

ReflectiveDLLInjection实战&#xff1a;从源码编译到进程注入完整流程 【免费下载链接】ReflectiveDLLInjection Reflective DLL injection is a library injection technique in which the concept of reflective programming is employed to perform the loading of a libra…...

编程新知 2026/3/30 9:21:50

SDXL 1.0绘图工坊环境部署：Ubuntu+conda+4090驱动适配完整流程

SDXL 1.0绘图工坊环境部署&#xff1a;Ubuntuconda4090驱动适配完整流程 1. 环境准备与系统要求 在开始部署SDXL 1.0绘图工坊之前&#xff0c;需要确保你的硬件和软件环境满足以下要求&#xff1a; 硬件要求&#xff1a; 显卡&#xff1a;NVIDIA RTX 4090&#xff08;24GB显…...

编程新知 2026/3/30 9:17:47

3月技术风暴：程序员的范式革命——2026年3月科技大事件记录

2025年3月&#xff1a;颠覆性技术狂潮与程序员认知升维全纪录 3月结束&#xff0c;你感受到“版本迭代”的压力了吗&#xff1f; 2025年的春天不是春暖花开&#xff0c;而是技术奇点的“温度骤升”。本文绝非一份普通事件清单&#xff0c;而是用程序员的第一性原理&#xff0c;…...

编程新知 2026/3/30 9:09:43

工业能量：04.选型小Tips：预算2000元玩转工厂电源

04.选型小Tips：预算2000元玩转工厂电源（新手也能选对不踩坑，PLC机器人稳稳的）** 在工厂里，最昂贵的不是设备，而是“停机一秒的代价”。 哎，师傅们，槐树底下风儿吹得正凉快，今天咱不拆原理、不讲高端配置，就聊最接地气的——2000块钱怎么给车间PLC和机器人挑个靠谱心脏…...

编程新知 2026/3/30 9:03:40