相对定位案例

最新推荐文章于 2025-12-02 22:03:53 发布
原创 最新推荐文章于 2025-12-02 22:03:53 发布 · 169 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #javascript

<!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>

        .box1 {

            position: relative;

            top: 100px;

            left: 100px;

            width: 200px;

            height: 200px;

            background-color: pink;

        }

        .box2 {

            width: 200px;

            height: 200px;

            background-color: skyblue;

        }

        /* 相对定位特点：

        移动位置是参照自己原来的位置

        不脱标，继续保留原来位置 */

    </style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

</body>

</html>

程序猫..
关注
CSS布局之定位—静态定位—相对定位—绝对定位—子绝父相—固定定位—定位元素的层级关系—案例（重：水平垂直居中）
小琳爱分享的博客
07-23 1008
CSS布局之定位—静态定位—相对定位—绝对定位—子绝父相—固定定位—定位元素的层级关系—案例（重：水平垂直居中）
CSS相对定位
weixin_52629592的博客
06-20 4758
当元素的position设置为relative时,则开启了元素的相对定位用法: position: relative ;相对定位的特点:元素开启相对定位之后, 如果不设置偏移量,元素不会发生任何变化(因此,我们在使用相对定位的时候,一定要设置元素的偏移量)相对定位是参照于元素在文档流中的位置进行移动的相对定位会提升元素的层级即当我们设置一个元素的位置与另一个元素冲突时,设置了相对定位的元素会显示在未设置定位元素的上面相对定位不会使元素脱离文档流相对定位不会改变元素的性质.块元素还是块元素,行元素还是行元素下
html5绝对定位案例,一线城市案例-相对定位和绝对定位-190322
weixin_36373381的博客
06-07 216
摘要： 相对定位和绝对定位的一线城市案例 相对定位和绝对定位的一线城市案例/*背景*/.div0{width:600px;height:600px;position:relative;}.clear{ clear:both; }/*统一给div加样式*/.div1 ,.div2,.div3,.div4{width:300px;height:300px;text-align:ce...
三菱FX PLC定位指令应用案例
u010670857的博客
09-07 5012
M8029作为指令执行完成标志，而一个正常的工程程序中可能有多个不同指令，即使是一个指令也可能是用到几次，此时要注意这些指令执行完成的标志都是同一个标志M8029，要避免一个指令的完成标志对另一个指令完成标志的影响，所以要在程序中要注意M8029要在各自的指令后面编写。当驱动条件成立时，执行PLSY指令，从输出口(Y0\Y1\Y2)输出一个频率为S1，脉冲个数为S2，占空比为50%的脉冲串，作定位控制命令用时，需要指定方向输出口Y，PLSY没有加减速时间设置，定位容易丢失脉冲或者过冲。
html绝对位置和相对位置例子,css-相对定位、绝对定位和固定定位例子
weixin_29367103的博客
06-09 629
相对定位相对定位.box1{height: 200px;background-color: red;position: relative;}.box2{width: 200px;height: 200px;background-color: yellow;/*定位：- 定位指的就是将指定的元素摆放到页面的任意位置通过定位可以任意的摆放元素- 通过position属性来设置元素的定位-可选值：sta...
相对定位和绝对定位的理解与应用
veritable的博客
08-20 2414
css中的position中有四个值：static、relative、absolute、fixed。接下来主要介绍relative（相对定位）和absolute（决定定位）。
决定定位和相对定位的区别
gao_zhennan的博客
03-31 1836
前言：学过的好多知识经常是当时学会了、理解了，但是过一段时间不使用就会差不多忘记了，又要花费时间去重复学习。为了避免或者减少重复学习学过的知识，因此对学过的东西进行总结。本文基于“Absolute（绝对定位）与relative（相对定位）"展开，做出了部分修改和补充。 Position的属性值有： 1.     Absolute：绝对定位，是相对于
CSS定位详解及案例
小洋人最happy的专栏
07-05 2493
文章目录一、标准流1.1 概念1.2 不足二、定位2.1 概念2.2 static-静态定位2.3 relative-相对定位2.3.1 特点：2.3.2 示例一2.3.3 示例二2.4 fixed-固定定位2.4.2 特点2.4.2 示例2.5 absolute-固定定位2.5.1 特点2.5.2 子绝父相2.5.3 示例一2.5.4 示例二2.6 层叠关系2.6.1 元素层叠2.6.2 z-index特点：2.6.3 比较原则2.6.3.1 兄弟关系2.6.3.2 如果不是兄弟关系三、小结3.1 对照表
css相对定位和绝对定位及案例
weixin_30295091的博客
04-24 720
css 相对定位和绝对定位及案例定位对于页面布局起着很大的作用，网上关于定位概念的技术文章已经很多了，我就不多说什么了，就说一下具体应用吧1.知识点:三种常见定位比较：不同点：relative：相对定位没有脱离文档流，原位置保留标准流位置，没有让出来，实体化显示位置通过设置偏移值发生偏移。absolute：脱离文档流，以父级为基准来进行偏移，参考点为父级border以内的四个顶点。fi...
h5的相对定位、绝对定位、固定定位以及案例练习
热门推荐
xuemoKingDeath的博客
04-24 1万+
html> html lang="en"> head> meta charset="UTF-8"> style> #right,#left,#center{ float: left; } #left{ width: 200px; height: 200px;
GPS相对定位的数学模型
09-23
《GPS相对定位的数学模型》是由魏子卿院士编著的一本深入探讨GPS（全球定位系统）相对定位技术的专业书籍。这本书旨在解析GPS在相对定位中的理论基础和实用方法，内容丰富，涵盖了大量的实践经验和学术精华。 GPS...
CSS元素的浮动与定位综合案例3.pdf
07-10
2. **定位（Positioning）**：包括相对定位、绝对定位和固定定位，可以精确控制元素的位置，其中相对定位是基于元素本身的位置，而绝对定位则基于最近的非静态定位祖先元素。 3. **背景图像（Background Image）**：...
台达伺服定位控制案例
04-16
该系统能够演示原点回归、相对定位和绝对定位功能，主要通过PLC发送脉冲控制信号来实现对伺服电机的精确控制。台达伺服电机是该系统的核心执行元件，它能够通过接收PLC发出的脉冲指令来调整其旋转的角度和速度。人机...
CSS 网页布局：技术基础与实践技巧
最新发布
csbysj2020的博客
12-02 401
CSS网页布局是前端开发中的核心技术之一，掌握CSS布局的基础知识和实践技巧对于成为一名优秀的前端开发者至关重要。本文介绍了CSS布局的基础知识、布局模型、实践技巧以及响应式布局，希望对读者有所帮助。
css 父节点设置display: flex； align-items: center；，子节点如何跟随其他子节点撑高的高度
PrimaryColor
12-02 70
父节点设置display: flex;，子节点如何跟随其他子节点撑高的高度？如果子节点设置了height，那么需要取消height的属性，让height为auto。
主题切换（1）：css变量的使用（:root）
Z_Wonderful的博客
12-01 360
:root 是一个伪类选择器，它匹配文档的根元素（即 <html> 元素）。使用 :root 定义 CSS 变量（自定义属性）可以让变量具有全局作用域，方便在整个项目中统一管理和动态调整样式
HTML/CSS 核心考点详解（字节跳动 ToB 中台场景）
2402_87628679的博客
12-01 818
语义化 HTML 就是用有明确含义的标签（如<header><nav><main>）替代无意义的通用标签<div>，让 HTML 结构 “自解释”—— 不用看 CSS/JS，就能看懂页面各部分的功能。块级格式化上下文，是一个 “独立的渲染区域”，区域内的元素布局不受外部影响，同时也不会影响外部元素。可以理解为：BFC 是一个 “隔离的盒子”，盒子里的元素怎么布局，都和盒子外的元素没关系。知识点核心考点实战场景语义化 HTML常用语义标签、结构合理性系统页面布局、模块划分Flex 布局。
[Vue]AntV1.7表格自带筛选确定和重置按钮位置交换
萌狼蓝天の技术栈
12-01 447
原来： 修改后：代码如下： 贴上AI的笔记(因为这个问题就是交给AI解决的 —— 感谢Kiro)需要自定义 Ant Design Vue 表格筛选器下拉框中的按钮样式：由于筛选器下拉框是通过 Portal 渲染到 body 下的，scoped 样式无法生效，需要添加一个不带 的 标签。 2. 关键技术点 2.1 Flexbox 布局控制顺序 使用 启用弹性布局 使用 属性控制元素顺序( 在前， 在后) 使用 让按钮分别靠左右两边 2.2 选择器精确度 使用完整的类名链： 2.3 样式优先级
html css js网页制作成品——鹿晗html+css+js 4页附源码
卡拉米
12-01 627
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
相对定位原理
05-14
<think>好的，我现在需要回答用户关于CSS中相对定位原理的问题。首先，我得回想一下相对定位的基本概念。相对定位是指元素相对于其原本的位置进行偏移，但不会影响其他元素的布局。用户可能想知道它是如何工作的，以及具体的应用场景。 根据用户提供的引用内容，引用[3]提到绝对定位的元素是基于同一模块内的position: relative的父元素定位的。这说明相对定位的一个关键作用是为绝对定位的子元素创建包含块。这点应该在回答中强调。 接下来，我需要组织回答结构，确保清晰易懂。首先解释相对定位的定义，然后说明其特点，比如使用top、right等属性进行偏移，保留原有空间等。接着举例说明代码，比如如何将一个按钮相对其原位置移动，并且不影响周围元素。 然后，生成相关问题。用户可能对相对定位与其他定位的区别感兴趣，比如与绝对定位的关系，或者实际应用中的案例。所以问题可以涉及相对定位与绝对定位的配合使用，或者常见的使用场景。 需要确保回答符合用户的要求，使用中文，行内公式正确（虽然这个问题可能不涉及数学公式，但如果有的话要正确使用），独立公式单独成段。同时检查是否有引用需要标注，引用[3]在这里相关，应该在适当的地方引用。 最后，验证回答的准确性，确保没有错误信息，比如相对定位是否真的保留原有空间，是否影响其他元素的位置。确认这些点后，整理语言，使其流畅自然。</think>### 相对定位的原理（CSS） 相对定位（`position: relative`）是 CSS 中控制元素定位的核心机制之一，其原理包含以下关键点： 1. **相对于自身原始位置偏移** 元素会基于其在文档流中的原始位置进行偏移，通过 `top`、`right`、`bottom`、`left` 属性调整位置。例如： ```css .box { position: relative; top: 20px; left: 30px; } ``` 此代码会将元素向下移动 `20px`，向右移动 `30px`，但不会改变其他元素的布局[^3]。 2. **保留原始空间** 即使元素发生偏移，其在文档流中原本占据的空间仍然保留，周围的元素不会重新排列。这与绝对定位（`position: absolute`）不同，后者会完全脱离文档流。 3. **创建包含块（Containing Block）** 当父元素设置为 `position: relative` 时，其子元素的绝对定位（`position: absolute`）会基于该父元素的边界进行定位。这种组合常用于实现下拉菜单或悬浮提示框[^3]。 #### 代码示例 ```html <div class="parent"> <div class="child">相对定位的子元素</div> </div> <style> .parent { position: relative; /* 创建包含块 */ width: 300px; height: 200px; border: 1px solid #ccc; } .child { position: absolute; top: 50px; /* 基于.parent的顶部偏移 */ left: 20px; } </style> ```
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值