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

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

news 2025/6/24 8:18:16

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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/6/16 23:24:18

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/6/24 3:39:03

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2025/6/21 6:34:03

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2025/6/21 14:53:22

图解JavaScript原型：原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

编程新知 2025/6/23 8:30:28

麒麟系统使用-进行.NET开发

文章目录 前言一、搭建dotnet环境1.获取相关资源2.配置dotnet 二、使用dotnet三、其他说明总结 前言 麒麟系统的内核是基于linux的&#xff0c;如果需要进行.NET开发&#xff0c;则需要安装特定的应用。由于NET Framework 是仅适用于 Windows 版本的 .NET&#xff0c;所以要进…...

编程新知 2025/6/24 5:05:07

Canal环境搭建并实现和ES数据同步

作者&#xff1a;田超凡 日期&#xff1a;2025年6月7日 Canal安装&#xff0c;启动端口11111、8082&#xff1a; 安装canal-deployer服务端&#xff1a; https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...

编程新知 2025/6/21 15:37:33

Axure零基础跟我学：展开与收回

亲爱的小伙伴，如有帮助请订阅专栏！跟着老师每课一练，系统学习Axure交互设计课程！ Axure产品经理精品视频课https://edu.csdn.net/course/detail/40420 课程主题：Axure菜单展开与收回 课程视频：...

编程新知 2025/6/22 4:23:23

构建Docker镜像的Dockerfile文件详解

文章目录 前言Dockerfile 案例docker build1. 基本构建2. 指定 Dockerfile 路径3. 设置构建时变量4. 不使用缓存5. 删除中间容器6. 拉取最新基础镜像7. 静默输出完整示例 docker runDockerFile 入门syntax指定构造器FROM基础镜像RUN命令注释COPY复制ENV设置环境变量EXPOSE暴露端…...

编程新知 2025/6/22 2:48:55

STM32 低功耗设计全攻略：PWR 模块原理 + 睡眠 / 停止 / 待机模式实战（串口 + 红外 + RTC 应用全解析）

文章目录 PWRPWR&#xff08;电源控制模块&#xff09;核心功能 电源框图上电复位和掉电复位可编程电压监测器低功耗模式模式选择睡眠模式停止模式待机模式 修改主频一、准备工作二、修改主频的核心步骤&#xff1a;宏定义配置三、程序流程&#xff1a;时钟配置函数解析四、注意…...

编程新知 2025/6/22 9:28:11