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

CSS 绝对定位 position:absolute

news 2026/3/29 20:18:29

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

SAP Basis实战：Client创建与数据迁移的完整流程与避坑指南

1. 理解SAP Client的基本概念 在SAP系统中&#xff0c;Client&#xff08;客户端&#xff09;是一个非常重要的概念。简单来说&#xff0c;它就像是系统中的一个独立工作空间&#xff0c;每个Client都有自己的配置和数据。想象一下&#xff0c;一家大型企业有多个子公司&#x…...

编程新知 2026/3/29 18:59:33

从Level 16到Level 17：Bandit游戏中的SSL端口扫描实战

1. 认识Bandit游戏与Level 16挑战 Bandit游戏是网络安全领域的经典入门实践平台&#xff0c;通过一系列渐进式关卡帮助玩家掌握基础命令行操作和安全概念。从Level 0开始&#xff0c;每个关卡都设计成需要解决特定安全问题才能通关的挑战。这种"做中学"的方式特别适合…...

编程新知 2026/3/29 18:39:29

Qwen-Turbo-BF16部署教程：WebUI响应延迟优化与Nginx反向代理配置

Qwen-Turbo-BF16部署教程&#xff1a;WebUI响应延迟优化与Nginx反向代理配置 1. 引言&#xff1a;从“黑图”到秒级出图&#xff0c;你的4090准备好了吗&#xff1f; 如果你用过一些开源的图像生成WebUI&#xff0c;可能遇到过这样的尴尬&#xff1a;输入了精心构思的提示词&…...

编程新知 2026/3/29 17:25:03

告别SD卡！用ADB在Windows PowerShell里给开发板传文件，保姆级避坑指南

告别SD卡&#xff01;用ADB在Windows PowerShell里给开发板传文件&#xff0c;保姆级避坑指南 嵌入式开发中&#xff0c;文件传输一直是个高频痛点。每次修改代码后&#xff0c;传统方式要么拔出SD卡用读卡器拷贝&#xff0c;要么搭建FTP/NFS网络共享&#xff0c;不仅步骤繁琐…...

编程新知 2026/3/29 15:36:01

Captura视频质量优化终极指南：先降噪后锐化的完美工作流

Captura视频质量优化终极指南&#xff1a;先降噪后锐化的完美工作流 【免费下载链接】Captura Capture Screen, Audio, Cursor, Mouse Clicks and Keystrokes 项目地址: https://gitcode.com/gh_mirrors/ca/Captura Captura是一款功能强大的屏幕录制工具&#xff0c;支持…...

编程新知 2026/3/29 14:45:41

Serge模型管理终极指南：如何快速下载、配置和优化AI模型

Serge模型管理终极指南&#xff1a;如何快速下载、配置和优化AI模型 【免费下载链接】serge A web interface for chatting with Alpaca through llama.cpp. Fully dockerized, with an easy to use API. 项目地址: https://gitcode.com/gh_mirrors/se/serge Serge是一个…...

编程新知 2026/3/29 14:33:36

汇川H5U PLC通过EtherNET/IP网关实现MODBUS RTU设备高效数据采集

1. 为什么需要EtherNET/IP网关连接MODBUS RTU设备 在工业自动化现场&#xff0c;经常会遇到这样的场景&#xff1a;主控系统使用的是支持EtherNET/IP协议的汇川H5U PLC&#xff0c;但现场大量传感器、仪表等设备仍然采用传统的MODBUS RTU协议&#xff08;通过RS485接口通信&…...

编程新知 2026/3/29 14:21:30

GLM-Image创新应用：基于算法的艺术风格探索

GLM-Image创新应用&#xff1a;基于算法的艺术风格探索 当AI算法遇见艺术创作&#xff0c;会碰撞出怎样的火花&#xff1f;GLM-Image正在重新定义数字艺术的可能性边界。 1. 引言&#xff1a;算法与艺术的完美融合 在数字艺术创作领域&#xff0c;传统工具往往需要艺术家具备深…...

编程新知 2026/3/29 10:40:59

如何快速掌握Mesa：Python多智能体建模的完整指南

如何快速掌握Mesa&#xff1a;Python多智能体建模的完整指南 【免费下载链接】mesa Mesa is an open-source Python library for agent-based modeling, ideal for simulating complex systems and exploring emergent behaviors. 项目地址: https://gitcode.com/gh_mirrors/…...

编程新知 2026/3/29 9:56:15

PP-DocLayoutV3惊艳案例：印章（seal）+ 页眉图片（header_image）+ 视觉脚注（vision_footnote）联合定位

PP-DocLayoutV3惊艳案例&#xff1a;印章&#xff08;seal&#xff09; 页眉图片&#xff08;header_image&#xff09; 视觉脚注&#xff08;vision_footnote&#xff09;联合定位 1. 引言&#xff1a;当文档布局分析遇到“硬骨头” 想象一下这个场景&#xff1a;你拿到一份…...

编程新知 2026/3/29 8:43:50