CSS 绝对定位 position:absolute

什么是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定位的常见场景包括悬浮菜单、对话框、图片轮播、工具提示等等。

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

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

相关文章

一个新名词之CSS高度塌陷

CSS高度塌陷 解决CSS高度塌陷的方法 CSS高度塌陷 CSS高度塌陷是指在网页布局中&#xff0c;父元素没有正确地根据其浮动子元素的高度进行扩展&#xff0c;从而表现为父元素的高度未能包裹住浮动子元素的现象。 通常表现为父元素高度变为0&#xff0c;或者比实际应该表现的高度…

【Android】工厂测试中 局部 字体显示重叠 问题分析与解决(Android14)

继上一篇【Android】工厂模式中 字体大小/显示重叠/显示不完整 相关 问题分析与解决 的分析与解决&#xff0c;可以实现调整所有字符整体的宽高。 但在局部&#xff0c;如果只希望修改局部的某一行字符的样式&#xff0c;且这一行字符没有直接的资源布局控制文件&#xff0c;而…

使用蜂鸟地图完成楼层自定义、房间着色、热力图、添加图片覆盖物、添加dom覆盖物、定位到固定区域的中心点

项目里有用到蜂鸟地图的地方&#xff0c;虽然有跟她们对接&#xff0c;但看他们文档也挺费劲的&#xff0c;要自己慢慢研究好久&#xff0c;有些实在研究不出来让他们帮忙看代码发现一些问题&#xff0c;所以把我发现的需要注意的一些点发上来&#xff0c;希望可以帮助到部分有…

力扣Lc17--- 345.反转字符串中的元音字母(java版)-2024年3月18日

1.题目 2.知识点 注1&#xff1a; indexOf() 是 Java 中 String 类的方法之一&#xff0c;它用于查找指定字符或字符串在字符串中第一次出现的位置。如果找到了该字符或字符串&#xff0c;则返回它在字符串中的索引位置&#xff08;从0开始&#xff09;&#xff0c;如果没有找…

读《Cheating Depth: Enhancing 3D Surface Anomaly Detection via Depth Simulation》

WCAV2024 摘要&引言 RGB骨干&#xff1a;某些表面异常仅在RGB中实际上仍然是看不见的&#xff0c;因此需要合并三维信息&#xff08;确实重点在于“合并”&#xff0c;单纯看例子里的深度图片也看不出来异常在哪里&#xff0c;但是和rgb overlay之后就明显一些了&#xf…

2024年pmp的考试时间是什么时候?

2024年 PMP 考试时间已经定了 &#xff0c;分别是 3 月、6月、8月、11月 &#xff0c;4月就准备报6月的考试了&#xff0c;有想法的别错过啦~ 一、报考条件 报考条件其实挺简单的&#xff0c;最核心的条件还是满足以下 2 个&#xff1a;1、本科毕业需要满 3 年时间&#xff0c…

网络编程--高并发服务器

这里写目录标题 引入场景 多进程并发服务器二级目录二级目录二级目录 多线程并发服务器二级目录二级目录二级目录 多路IO转接服务器设计思路对比引入 select函数简介参数介绍第一个参数第234参数返回值对于第234参数的应用对于最后一个参数总结 附加操作&#xff08;附加四个函…

项目试运行报告-word

一、试运行目的 软件项目试运行的主要目的是在实际应用环境中对软件系统进行全面检验&#xff0c;确保其满足设计要求和用户需求&#xff0c;同时发现和解决潜在的问题&#xff0c;为正式投入使用做好准备。通过试运行&#xff0c;我们可以&#xff1a; 验证软件系统的稳定性…

国创证券|资源再生概念持续活跃,超越科技两连板,大地海洋等走高

资源再生概念15日盘中再度走强&#xff0c;截至发稿&#xff0c;超越科技涨停斩获两连板&#xff0c;深水海纳涨超14%&#xff0c;大地海洋涨超12%&#xff0c;华新环保涨近9%&#xff0c;天奇股份、格林美、怡球资源等涨超5%。 消息面上&#xff0c;3月13日&#xff0c;国务院…

全新2024快递平台系统 独立版快递信息查询小程序源码 cps推广营销流量主+前端 同城快递平台

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 快递代发快递代寄寄件小程序可以对接易达云洋一级总代 快递小程序&#xff0c;接入云洋/易达物流接口&#xff0c;支持选择快递公司&#xff0c;三通一达&#xff0c;极兔&#xff0c…

Python the code is unreachable

Python the code is unreachable 正文 正文 相信有不少小伙伴在使用 Python 的时候有时候会遇到 the code is unreachable 这样的 warning 提示。这种提示表示在我们当前书写的代码种有一部分代码被屏蔽了。可能会存在潜在的 bug&#xff0c;需要我们注意&#xff0c;那么什么…

Three 光源 (总结四)

萤火虫飞舞 import * as THREE from three import { OrbitControls } from ../../js/jsm/controls/OrbitControls.js; // 引入相机控件let scene, camera, renderer, controls, flyBall, ball function init() {scene new THREE.Scene()camera new THREE.PerspectiveCamera(7…

幸福金龄会第二届《锦绣中华》中老年文旅文化艺术节圆满落幕

广东&#xff0c;这片承载着深厚文化底蕴的土地&#xff0c;再次见证了中老年文化艺术的璀璨盛放。近日&#xff0c;由幸福金龄会主办、广之旅协办的第二届《锦绣中华》中老年文旅文化艺术节在广东隆重举行。活动汇聚了广东各支文艺团队&#xff0c;他们用最真挚的表演&#xf…

讲述微信小程序 通信模型

之前的文章 讲述微信小程序宿主环境 我们讲到了 手机微信 为小程序 提供了多方面支持 包括 1 通讯模型 2 运行机制 3 组件 4 API 今天 我们就来说 通讯模型 小程序中的 通信主题 是 渲染层 和 逻辑层 首先 渲染层中 包含的是 wxml 页面模板 和 wxss样式 逻辑层 里面则都是js的…

如何从视频中提取gif?仅需三步在线制作

视频提取GIF是一种常见的图像处理技术&#xff0c;它可以将视频中的某一段或某一帧提取出来&#xff0c;并保存为GIF格式的动图。这种技术在互联网上广泛应用&#xff0c;成为了分享精彩瞬间和制作有趣动画的有力工具。想要从视频中截取动图&#xff0c;使用视频转gif工具&…

超越标签的探索:K-means与DBSCAN在数据分析中的新视角

最近在苦恼为我的数据决定分组问题&#xff0c;在查找资料时&#xff0c;恰好看到机器学习中的无监督学习的聚类分析&#xff0c;正好适用于我的问题&#xff0c;但是我之前学机器学习时。正好没有学习无监督部分&#xff0c;因为我认为绝大多数问题都是有标签的监督学习&#…

IPSEC VPN-详解原理

目录 IPSEC提供的安全服务 IPSEC协议簇 ​编辑 安全协议 1.传输模式 2. 隧道模式 AH ---鉴别头协议 AH提供的安全服务&#xff1a; AH头部 AH的保护范围 1.传输模式 2.隧道模式 ​编辑 ESP ---封装安全载荷协议 ESP提供的安全服务&#xff1a; ESP的头部 ESP的保护范围 1.传输…

进程的概念 | PCB | Linux下的task_struct | 父子进程和子进程

在讲进程之前首先就是需要去回顾一下我们之前学的操作系统是干嘛的&#xff0c;首先操作系统是一个软件&#xff0c;它是对上提供一个良好高效&#xff0c;稳定的环境的&#xff0c;这是相对于用户来说的&#xff0c;对下是为了进行更好的软硬件管理的&#xff0c;所以操作系统…

es文档操作命令

文档操作 documents 创建数据&#xff08;put&#xff09; 向 user 索引下创建3条数据 PUT /user/_doc/1 {"name":"zhangsan","age":18,"sex":"男","info":"一顿操作猛如虎&#xff0c;一看工资2500"…

关于卷积神经网络特征可视化

卷积神经网络CNN&#xff0c;一个大号/深层的&#xff0c;现代的&#xff0c;黑箱的&#xff0c;信号/图像处理器。 简单讲解如何将图像输入到卷积神经网络CNN并显示网络不同层的激活图&#xff0c;并通过将激活图与原始图像进行比较以探索网络学习哪些特征 本例来源于Mathwo…