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

css relative 和absolute布局

news 2026/3/27 3:58:35

1、relative和absolute内部的元素都是相对于父容器，若父容器没有指定为relative，则默认为整个文档视图空间，absolute可以重叠元素，relative则不行。relative意味着元素的任意属性如left和right都是相对于其他元素的。absolute则相当于外部容器。

2、margin属性相对于容器中的其他元素和父边框

绝对定位的特点

  1. 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化。

  2. 开区绝对定位后的元素脱离文档流

  3. 绝对定位会改变元素的性质，行内变成快，快的高度被内容撑开。

  4. 决定定位会使元素提升一个层级。

  5. 绝对定位元素时相对于其包含块进行定位的。

相对定位的特点

  1. 元素开启相对定位以后，如果不设置偏移量，元素不会发生任何的变化。
  2. 它是参照于元素在文档流中的位置进行定位的。
  3. 它会提升元素的层级。
  4. 它不会使元素脱离文档流。
  5. 它不会改变元素的性质：块元素还是块元素，行内元素还是行内元素。

参考：一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块_css absolute相对于谁定位_互联网全栈开发实战的博客-CSDN博客

Absolute：元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。

Relative：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。
————————————————
版权声明：本文为CSDN博主「Lminxia」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42067967/article/details/80152403

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.container{width: 100%;height: 100px;background-color: blueviolet;}.wrapper{width: 100%;height: 50px;background-color: red;position: relative;}.b1{position: absolute;margin-left: 10px;margin-top: 10px;width: 20px;height: 20px;background-color: blue;}.b2{position: absolute;right: 5px;top:5px;width: 20px;height: 20px;background-color: green;}</style>
</head>
<body><div class="container"><div class="wrapper"><div class="b1"></div><div class="b2"></div></div></div>
</body>
</html>

页面预览

相关文章：

css relative 和absolute布局

1、relative和absolute内部的元素都是相对于父容器&#xff0c;若父容器没有指定为relative&#xff0c;则默认为整个文档视图空间&#xff0c;absolute可以重叠元素&#xff0c;relative则不行。relative意味着元素的任意属性如left和right都是相对于其他元素的。absolute则相…...

编程日记 2023/9/10 2:06:30

更健康舒适更科技的照明体验！书客SKY护眼台灯SUKER L1上手体验

低价又好用的护眼台灯是多数人的需求&#xff0c;很多人只追求功能性护眼台灯&#xff0c;显色高、无频闪、无蓝光等基础需求。但是在较低价格中很难面面俱到&#xff0c;然而刚发布的SUKER书客L1护眼台灯却是一款不可多得的性价比护眼台灯&#xff0c;拥有高品质光源&#xff…...

编程日记 2023/9/10 2:05:29

经管博士科研基础【19】齐次线性方程组

1. 线性方程组 2. 非线性方程组 非线性方程，就是因变量与自变量之间的关系不是线性的关系，这类方程很多，例如平方关系、对数关系、指数关系、三角函数关系等等。求解此类方程往往很难得到精确解，经常需要求近似解问题。相应的求近似解的方法也逐渐得到大家的重视。 3. 线…...

编程日记 2023/9/10 2:04:28

django报错解决 Forbidden (403) CSRF verification failed. Request aborted.

django报错解决 Forbidden (403) CSRF verification failed. Request aborted. 报错内容 Forbidden (403) CSRF verification failed. Request aborted.Help Reason given for failure:Origin checking failed - https://active-mantis-distinct.ngrok-free.app does not mat…...

编程日记 2023/9/10 2:03:25

k8s-实战——yapi平台部署

文章目录 k8s 部署yapi平台前言准备工作构建yapi镜像Dockerfileentrypoint.shbuild.sh源码下载构建镜像启动mongo数据库新建nfs服务mongo创建mongo服务初始化数据启动yapi服务创建yapi服务查看密码访问地址k8s 部署yapi平台 前言 部署yapi平台需要mo...

编程日记 2023/9/10 2:02:21

Excel VSTO开发5 -Excel对象结构

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 5 Excel对象结构 Excel提供了几个比较重要的对象&#xff1a; Application、Workbooks、Workbook、Worksheets、Worksheet 为了便…...

编程日记 2023/9/10 2:01:19

Javafx集成sqlite数据库

什么是SQLite SQLite是一款非常轻量级的关系数据库系统&#xff0c;支持多数SQL92标准。SQLite在使用前不需要安装设置&#xff0c;不需要进程来启动、停止或配置&#xff0c;而其他大多数SQL数据库引擎是作为一个单独的服务器进程&#xff0c;被程序使用某种内部进程通信(典型…...

编程日记 2023/9/10 2:00:17

react-native实现 TextInput 键盘显示搜索按钮并触发回调

<TextInput returnKeyType"search"returnKeyLabel"搜索"onSubmitEditing{e > {toSearch(keyword);}} /><SearchBarref{serachBarEl}placeholder"请输入"onChangeText{handleChangeSearch}value{search}onSubmitEditing{handleSearch…...

编程日记 2023/9/10 1:59:15

人大金仓分析型数据库备份和恢复（五）

增量备份 gpbackup和gprestore工具支持创建追加优化表的增量备份以及从增量备份还原。 只有表被更改时&#xff0c;增量备份才会备份所有指定的堆表和追加优化的表&#xff08;包括追加优化的&#xff0c;面向列的表&#xff09;。 例如&#xff0c;如果追加优化表的行已更改&a…...

编程日记 2023/9/10 1:58:09

lenovo联想笔记本ThinkPad P16V Gen 1(21FC,21FD)原装出厂Win11系统

原厂W11系统自带所有驱动、出厂主题壁纸、Office办公软件、联想电脑管家等预装程序 链接&#xff1a;https://pan.baidu.com/s/17dTExDSz-EDN4Qd-PZGJuw?pwdrgl3 提取码&#xff1a;rgl3 所需要工具&#xff1a;32G或以上的U盘 文件格式&#xff1a;ISO 文件大小…...

编程日记 2023/9/10 1:57:09

Django实现音乐网站 ⒃

使用Python Django框架制作一个音乐网站&#xff0c; 本篇主要是歌手详情页-专辑列表、专辑详情-单曲列表开发实现内容。 目录 歌手详情-专辑列表 路由设置 跳转设置 视图方法 模板内容 专辑详情-单曲列表 设置路由 视图处理并返回 模板渲染 分页优化 引入错误类型库…...

编程日记 2023/9/10 1:56:08

【开发问题系列】CSV转Excel

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…...

编程日记 2023/9/10 1:55:05

mysql物理备份步骤

原库10.153.88.5&#xff0c;新建数据库实例10.153.88.6&#xff0c;注意/etc/my.cnf配置和88.5一致&#xff0c;测试目的是通过copy数据文件到88.6来恢复数据库。 在数据库10.153.88.5打包数据文件&#xff1a; [mysqlt3-dtpoc-dtpoc-web04 mysql]$ cd /testdata/mysql [mys…...

编程日记 2023/9/10 1:54:03

react使用hook封装一个tab组件

目录 react使用hook封装一个tab组件Tabbar.jsx使用组件效果 react使用hook封装一个tab组件 Tabbar.jsx import PropsTypes from "prop-types"; import React, { useEffect, useState } from react; export default function Tabbar(props) {const { tabData , cur…...

编程日记 2023/9/10 1:53:02

java详细安装教程（供参考）一一java（jdk）安装

一、java历史简介 1991 年Sun公司的James Gosling等人开始开发名称为 Oak &#xff08;橡树&#xff09;的语言。希望用于控制嵌入在有线电视交换盒、PDA等的微处理器&#xff0c; 1994年将Oak语言更名为Java 1998年JDK1.2时&#xff0c;更名为Java 2 Platform 分为标准版J…...

编程日记 2023/9/10 1:51:58

C++函数内联详解

本文旨在讲解C中的函数内联相关知识&#xff0c;读完这篇文章&#xff0c;希望读者们会对函数内联有更深一步的认识&#xff01; 内联函数的定义 在计算机科学中&#xff0c; 内联函数 &#xff08;有时称作 在线函数 或 编译时期展开函数 &#xff09;是一种编程语言结构&…...

编程日记 2023/9/10 1:50:57

Revit SDK 介绍：NewForm 新建体量

前言 这个例子介绍如何新建体量。 内容 图形生成效果。 用 Extrusion 创建体量 // 创建一个轮廓 ReferenceArray ref_ar new ReferenceArray(); // 创建三条直线&#xff0c;并放入轮廓 Autodesk.Revit.DB.XYZ ptA new Autodesk.Revit.DB.XYZ(10, 10, 0); Autodesk.Rev…...

编程日记 2023/9/10 1:49:56

Ubuntu离线或在线安装Python解释器

这里以安装Python3.5.7为例。 首先进入官网&#xff0c;下载Python-3.5.7.tgz&#xff0c;或者使用以下命令下载&#xff08;需要联网&#xff09;&#xff1a; wget https://www.python.org/ftp/python/3.5.7/Python-3.5.7.tgz下载完成后&#xff0c;使用以下命令进行解压缩…...

编程日记 2023/9/10 1:48:55

微信小程序隐私协议相关接口实际使用方式

<view wx:if"{{showPrivacy}}" class"privacy"><view class"popup"><view>隐私弹窗内容....</view><view bindtap"openPrivacyAgreement">点击查看隐私协议</view><button id"disagreeBt…...

编程日记 2023/9/10 1:47:55

MySQL--MySQL表的增删改查（进阶）

check 聚合查找 count sum average max min 我们这里先构造出多张表 查询lisi同学的成绩 来自student和来自score c 增加名字这一条件 查询所有同学的总成绩以及个人信息 来自score和来自student 查询所有同学的各科成绩以及个人信息 来自student&#xff0c;course和…...

编程日记 2023/9/10 1:46:53

Mojo调用Python模块性能翻倍？深度剖析混合编程内存管理、GIL绕过与ABI兼容性（附实测基准数据）

第一章&#xff1a;Mojo与Python混合编程案例源码分析Mojo 作为兼具 Python 兼容性与系统级性能的新一代编程语言&#xff0c;其与 Python 的混合编程能力是实际工程落地的关键。以下通过一个典型场景——在 Python 主程序中调用 Mojo 实现的高性能向量加法函数——展开源码级剖…...

编程新知 2026/3/27 1:36:21

百度网盘提取码智能获取工具：提升资源访问效率的技术方案

百度网盘提取码智能获取工具&#xff1a;提升资源访问效率的技术方案 【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 核心价值&#xff1a;重新定义资源访问效率 &#x1f680; 在信息快速流转的今天&#xff0c;获取网络资源…...

编程新知 2026/3/27 0:31:30

知识引导上下文优化（KgCoOp）：一种解决灾难性遗忘的 Prompt Tuning 机制

来源&#xff1a;DeepHub IMBA 本文约3000字&#xff0c;建议阅读5分钟本文提出了一种简单有效的约束机制。视觉-语言模型&#xff08;VLMs&#xff09;如 CLIP 彻底改变了零样本图像识别的处理方式。这类模型在包含 4 亿个图像-文本对的大规模数据集上进行训练&#xff0c;捕获…...

编程新知 2026/3/27 0:07:19

MelonLoader终极指南：3分钟掌握Unity游戏模组加载器完整使用技巧

MelonLoader终极指南&#xff1a;3分钟掌握Unity游戏模组加载器完整使用技巧 【免费下载链接】MelonLoader The Worlds First Universal Mod Loader for Unity Games compatible with both Il2Cpp and Mono 项目地址: https://gitcode.com/gh_mirrors/me/MelonLoader Me…...

编程新知 2026/3/26 23:04:50

软考-信息系统项目管理师-项目风险管理-知识点及考点预测

本章考情分析&#xff1a;项目风险管理是十大知识领域中“理论工具计算”结合最紧密的章节之一。历年综合知识选择题约占3-5分&#xff0c;案例分析几乎必考1道题&#xff08;10-20分&#xff09;&#xff0c;论文也是高频方向。“风险是未来的不确定性&#xff0c;问题已经是过…...

编程新知 2026/3/26 23:02:50

原子操作的实现原理

在并发编程、操作系统与计算机体系结构中&#xff0c;原子操作是保证数据安全、避免竞态条件的基石。它的核心特性是不可中断、不可分割&#xff0c;操作要么完整执行&#xff0c;要么完全不执行&#xff0c;绝不会出现中间状态。本文将从定义出发&#xff0c;逐层拆解原子操作…...

编程新知 2026/3/26 22:10:06

无线通信入门：为什么说DFT是提升OFDM信道估计性能的“降噪神器”？

无线通信中的降噪艺术&#xff1a;DFT如何让OFDM信道估计更精准 想象一下&#xff0c;你正试图在嘈杂的咖啡馆里听清朋友的谈话。背景音乐、周围人的聊天声、杯盘碰撞声都在干扰你获取清晰的信息。无线通信中的信道估计面临类似的挑战——如何在充满噪声的传输环境中&#xff0…...

编程新知 2026/3/26 22:00:04

AI智能体实战：从入门到企业级自动化应用

摘要 本文基于我过去一年多在企业级AI智能体落地的实战经验&#xff0c;从核心架构设计、从零到一的落地实战、生产环境踩坑避坑&#xff0c;到企业级进阶优化&#xff0c;完整拆解AI智能体从玩具Demo到生产级自动化应用的全流程。本文不搞空泛的理论堆砌&#xff0c;所有内容均…...

编程新知 2026/3/26 21:58:03

Java中高效移除文本文件标点符号的实用指南

本教程详细阐述了在Java中从文本文件中有效删除标点符号的方法。我们将使用Java NIO的Files.lines()结合Streamm API&#xff0c;重点介绍正则表达式p{Punct}强大的功能&#xff0c;以简单、强大的方式实现文本清洁&#xff0c;避免传统硬编码的局限性&#xff0c;从而提高文本…...

编程新知 2026/3/26 20:13:43

路径跟踪惩罚

基于动力学模型MPC的加入规划层的轨迹跟踪避障控制&#xff08;优化过的&#xff0c;效果比书本的好&#xff09;半夜调试控制器的时候&#xff0c;突然发现传统轨迹跟踪像极了直男开车——死盯目标点不管周围环境。这周给移动机器人怼了个混合架构&#xff0c;把全局规划直接喂…...

编程新知 2026/3/26 19:53:33