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

position定位静态定位/绝对定位/相对定位

news 2026/3/27 3:45:35

1.静态定位static：按照标准流进行布局

<!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>.main{width: 500px;height: 200px;border: 1px solid black;}.son{/* positionstatic:静态定位为position的默认值，表示盒子按照标准流进行布局absolute:以父盒子为基准relative:相当于太自己便宜*/position: static;width: 200px;height: 120px;border: 1px solid black;}</style></head><body><div class="main"><div class="son">静态定位</div></div>
</body>
</html>

2.绝对定位absolute：以父结点为基准进行定位

<!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>.main{width: 500px;height: 200px;border: 1px solid black;}.son{/* positionstatic:静态定位为position的默认值，表示盒子按照标准流进行布局absolute:以父盒子为基准,进行定位relative:相当于太自己便宜*/position: absolute;width: 200px;height: 120px;border: 1px solid black;top: 30px;left: 30px;}</style></head><body><div class="main"><div class="son">绝对定位</div></div>
</body>
</html>

3.相对定位relative：相对于原来的标准位置进行偏移

<!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>div{border: 1px solid black;}.main{width: 500px;height: 200px;border: 1px solid black;}.son{/* positionstatic:静态定位为position的默认值，表示盒子按照标准流进行布局absolute:以父盒子为基准,进行定位relative:相当于太自己便宜*/position: relative;width: 200px;height: 120px;border: 1px solid black;top: 30px;left: 30px;}</style></head><body><div class="main"><div>普通盒子</div><div>1</div><div class="son">相对定位</div></div>
</body>
</html>

此时将position换成absolute效果如下

对比一下绝对定位和相对定位

相关文章：

position定位静态定位/绝对定位/相对定位

1.静态定位static&#xff1a;按照标准流进行布局 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>D…...

编程日记 2024/10/14 6:46:41

2024年09月CCF-GESP编程能力等级认证C++编程三级真题解析

本文收录于专栏《C++等级认证CCF-GESP真题解析》，专栏总目录：点这里。订阅后可阅读专栏内所有文章。 一、单选题（每题 2 分，共 30 分） 第 1 题 下列代码中，输出结果是（ ） #include<iostream> using namespace std; i...

编程日记 2024/10/14 6:44:39

Web自动化Demo-PHP+Selenium

1.新建工程 打开PhpStorm新建工程如下&#xff1a; 打开终端输入如下命令安装selenium&#xff1a; composer require php-webdriver/webdriver 2.编写代码 <?php require vendor/autoload.php;use Facebook\WebDriver\Remote\RemoteWebDriver; use Facebook\WebDriver…...

编程日记 2024/10/14 6:42:38

Python速成笔记——知识（GUI自动化处理屏幕和按键输出）

处理屏幕 获取屏幕快照 函数：pyautogui.screenshot(); 【注】该函数返回包含一个屏幕快照的Image对象； 分析屏幕快照 函数：pyautogui.pixel()； 【注】 传递一个坐标的元组，函数返回坐标对应像素点的RGB值（RGB元组） 函数：pyautogui.pixelMatchesColor() 【注】 函数第一…...

编程日记 2024/10/14 6:40:36

计算机是如何输入存储输出汉字、图片、音频、视频的

计算机是如何输入存储输出汉字、图片、音频、视频的 为了便于理解&#xff0c;先了解一下计算机的组成。 冯诺依曼计算机的五大组成部分。分别是运算器、控制器、存储器、输入设备和输出设备。参见下图&#xff1a; 一、运算器 运算器又称“算术逻辑单元”&#xff0c;是计算…...

编程日记 2024/10/14 6:37:34

springboot系列--web相关知识探索五

一、前言 web相关知识探索四中研究了请求中所带的参数是如何映射到接口参数中的&#xff0c;也即请求参数如何与接口参数绑定。主要有四种、分别是注解方式、Servlet API方式、复杂参数、以及自定义对象参数。web相关知识探索四中主要研究了复杂参数底层绑定原理。本次主要是研…...

编程日记 2024/10/14 6:34:31

开源商城系统crmeb phpstudy安装配置

BOSS让我最快时间部署一套开源商场系统&#xff0c;今天就以crmeb为例。 快速部署在linux中我会首选docker&#xff0c;因为我要在windows中部署&#xff0c;本文就选用phpstudy集成环境做了。 什么是crmeb 我从官网摘点&#xff1a; CRMEB产品与服务 CRMEB通过将CRM&#x…...

编程日记 2024/10/14 6:32:29

【论文阅读笔记】Bigtable: A Distributed Storage System for Structured Data

文章目录 1 简介2 数据模型2.1 行2.2 列族2.3 时间戳 3 API4 基础构建4.1 GFS4.2 SSTable4.3 Chubby 5 实现5.1 Tablet 位置5.2 Tablet 分配5.3 为 tablet 提供服务5.4 压缩5.4.1 小压缩5.4.2 主压缩 6 优化6.1 局部性组6.2 压缩6.3 缓存6.4 布隆过滤器6.5 Commit日志实现6.6 T…...

编程日记 2024/10/14 6:30:27

linux从入门到精通-从基础学起，逐步提升，探索linux奥秘（十一）--rpm管理和计划任务

linux从入门到精通-从基础学起&#xff0c;逐步提升&#xff0c;探索linux奥秘&#xff08;十一&#xff09;–rpm管理和计划任务 一、rpm管理&#xff08;重点&#xff09; 1、rpm管理 作用&#xff1a; rpm的作用类似于windows上的电脑管家中“软件管理”、安全卫士里面“…...

编程日记 2024/10/14 6:28:25

【C++几种单例模式解读及实现方式】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、单例是什么&#xff1f;二、解读1.懒汉式2.饿汉式3.static变量特性4.call_once特性 总结 前言 单例模式几乎是每种语言都不可少的一种设计模式&#xff0c…...

编程日记 2024/10/14 6:25:23

QT开发--串口通信

第十六章 串口通信 16.1 串口通信基础 串口通信主要通过DB9接口&#xff0c;适用于短距离&#xff08;<10米&#xff09;。关键参数包括&#xff1a; 波特率&#xff1a;每秒传输bit数&#xff0c;如9600。数据位&#xff1a;信息包中的有效数据位数。停止位&#xff1a;…...

编程日记 2024/10/14 6:24:22

数据库（至少还的再花两天 ）

1 连接查询 左连接 右连接 2 聚合函数 SQL 统计求和 求最值 count sum avg max min 3 SQL关键字 limit 分页 group by 分组 distinct 去重 4 Select执行顺序 from where group by order by 5 数据库三范式 原子性 唯一性 直接性 6 存储引擎 MyISAM InnoDB 7 …...

编程日记 2024/10/14 6:22:20

网络安全公司及其主要产品介绍

以下是一些全球领先的网络安全公司及其主要产品介绍&#xff1a; 一、思科&#xff08;Cisco&#xff09; 思科是全球最大的网络设备供应商之一&#xff0c;其网络安全产品以企业级解决方案为主&#xff0c;覆盖多种安全需求。 Cisco ASA&#xff08;Adaptive Security Appli…...

编程日记 2024/10/14 6:21:19

orjson:高性能的Python JSON库

在Python中处理JSON数据是一项常见任务,标准库的json模块虽然功能齐全,但在性能方面还有提升空间。今天我要向大家介绍一个出色的第三方JSON库 - orjson。 orjson简介 orjson是一个快速、正确的Python JSON库。它具有以下主要特点: 性能卓越 - 在序列化和反序列化方面都比标准…...

编程日记 2024/10/14 6:20:18

常见几大排序算法

排序算法是计算机科学中的基本算法&#xff0c;它们将一个无序的数组或列表按特定顺序进行排列&#xff08;如升序或降序&#xff09;。常见的排序算法可以根据其时间复杂度、空间复杂度和适用场景分类。以下是几种常见的排序算法&#xff1a; 1. 冒泡排序&#xff08;Bubble …...

编程日记 2024/10/14 6:18:16

Linux下CMake入门

CMake的基础知识 什么是 CMake CMake 是一个跨平台的构建工具&#xff0c;主要用于管理构建过程。CMake 不直接构建项目&#xff0c;而是生成特定平台上的构建系统&#xff08;如 Unix 下的 Makefile&#xff0c;Windows 下的 Visual Studio 工程&#xff09;&#xff0c;然后…...

编程日记 2024/10/14 6:17:15

网络资源模板--Android Studio 实现简易记事本App

目录 一、项目演示 二、项目测试环境 三、项目详情 四、完整的项目源码 一、项目演示 网络资源模板--基于Android studio 实现的简易记事本App 二、项目测试环境 三、项目详情 首页 创建一个空的笔记本列表 mNotebookList。使用该列表和指定的布局资源 item_notebook 创建…...

编程日记 2024/10/14 6:15:14

根据Vue对比来深入学习React 下 props 组件传值 插槽 样式操作 hooks 高阶组件 性能优化

文章目录 函数组件的特点props组件间的传值父传子看上例子传父兄弟组件传值祖先组件传值 插槽基础插槽具名插槽作用域插槽 样式操作**CSS Modules** 生命周期useRef常用hookuseStateuseEffectuseContextuseReduceruseMemouseCallback 高阶组件什么时候使用 react性能问题和优化…...

编程日记 2024/10/14 6:13:12

HTML（六）超链接

HTML讲解&#xff08;一&#xff09;body部分_html body-CSDN博客 <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>title</title> </head><body><a href"https://blog.csdn.net/2301_8034953…...

编程日记 2024/10/14 6:12:11

【Coroutines】Implement Lua Coroutine by Kotlin - 2

Last Chapter Link 文章目录 Symmetric CoroutinesNon-Symmetric Coroutine SampleSymmetric Coroutine SampleHow to Implement Symmetric CoroutinesWonderful TricksCode DesignTail Recursion OptimizationFull Sources Symmetric Coroutines in last blog, we have talk…...

编程日记 2024/10/14 6:09:08

B站视频下载终极指南：BilibiliDown的完整使用教程

B站视频下载终极指南&#xff1a;BilibiliDown的完整使用教程 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirrors/bi/Bi…...

编程新知 2026/3/27 3:33:08

深入OpenBMC散热控制：从IPMI命令到D-Bus，揭秘手动与自动模式切换

深入OpenBMC散热控制&#xff1a;从IPMI命令到D-Bus&#xff0c;揭秘手动与自动模式切换 在数据中心和服务器运维领域&#xff0c;散热控制一直是系统稳定性的关键因素。OpenBMC作为开源基板管理控制器&#xff0c;其散热管理机制直接影响到服务器的可靠性和能效比。本文将带您…...

编程新知 2026/3/27 3:21:05

MCP服务器性能翻倍的秘密：基于asyncio+uvloop+Pydantic V2的轻量级模板（压测QPS达12,800+）

第一章&#xff1a;MCP服务器开发模板概述与核心价值MCP&#xff08;Model-Controller-Protocol&#xff09;服务器开发模板是一套面向协议驱动、可插拔架构的后端服务构建范式&#xff0c;专为高并发、多协议适配&#xff08;如HTTP/2、gRPC、WebSocket、MQTT&#xff09;场景…...

编程新知 2026/3/27 1:15:58

pyautocad：实现AutoCAD自动化流程的创新方法

pyautocad&#xff1a;实现AutoCAD自动化流程的创新方法 【免费下载链接】pyautocad AutoCAD Automation for Python ⛺ 项目地址: https://gitcode.com/gh_mirrors/py/pyautocad pyautocad作为开发者必备的效率工具&#xff0c;通过Python语言与AutoCAD的ActiveX接口无…...

编程新知 2026/3/27 0:15:26

全新K4A4G165WG-BCWE000 4Gb DDR4 SDRAM 内存芯片 三星Samsung 进口芯片IC

K4A4G165WG-BCWE000 是三星半导体&#xff08;Samsung&#xff09;推出的一款4Gb DDR4 SDRAM 内存芯片&#xff0c;采用 96-ball FBGA 封装&#xff0c;组织为 256M 16 结构。它凭借 3200Mbps 的高数据速率、1.2V 低功耗设计以及 -40C 至 95C 的宽温工作能力&#xff0c;广泛应…...

编程新知 2026/3/26 23:24:55

手把手教你用Hive SQL搞定电影评分数据分析（附完整数据集和避坑指南）

手把手教你用Hive SQL搞定电影评分数据分析&#xff08;附完整数据集和避坑指南&#xff09; "为什么《肖申克的救赎》常年霸占IMDb Top 250榜首&#xff1f;"这个问题背后隐藏着海量用户评分数据的秘密。作为数据分析师&#xff0c;我们如何从原始评分数据中挖掘出这…...

编程新知 2026/3/26 23:00:49

Thorium浏览器：重新定义现代网页浏览性能标准

Thorium浏览器&#xff1a;重新定义现代网页浏览性能标准 【免费下载链接】thorium Chromium fork named after radioactive element No. 90. Windows and MacOS/Raspi/Android/Special builds are in different repositories, links are towards the top of the README.md. …...

编程新知 2026/3/26 22:56:48

跨平台嵌入式开发库gear-lib功能解析与应用

1. 跨平台嵌入式开发基础库gear-lib深度解析1.1 项目概述gear-lib是一组采用POSIX C标准实现的通用基础库集合&#xff0c;其设计目标是为嵌入式系统、物联网设备及网络服务开发提供跨平台支持。该库支持Linux、Windows、Android和iOS等多种操作系统环境&#xff0c;采用MIT开源…...

编程新知 2026/3/26 22:50:30

NaViL-9B效果实测：支持中英文混排表格图像的行列结构识别与内容提取

NaViL-9B效果实测&#xff1a;支持中英文混排表格图像的行列结构识别与内容提取 1. 模型介绍 NaViL-9B是新一代原生多模态大语言模型&#xff0c;专为处理复杂视觉-语言任务设计。与常规视觉模型不同&#xff0c;它不仅能够理解图片内容&#xff0c;还能精准解析表格、文档等…...

编程新知 2026/3/26 22:44:21

ComfyUI Inpaint实战：5分钟搞定照片路人甲，AI修图从此不求人

ComfyUI Inpaint实战&#xff1a;5分钟搞定照片路人甲&#xff0c;AI修图从此不求人 每次旅行拍照总有几个"不速之客"闯入镜头&#xff1f;社交媒体晒图前总为背景里的路人发愁&#xff1f;别担心&#xff0c;今天我要分享的ComfyUI Inpaint技术&#xff0c;能让这些…...

编程新知 2026/3/26 21:36:00