css relative的一点点理解

最新推荐文章于 2025-06-11 19:48:56 发布
原创 最新推荐文章于 2025-06-11 19:48:56 发布 · 197 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了CSS中position: relative相对定位的特性。当一个元素设置为相对定位，并使用top, left, bottom, right属性时，它将偏离其正常文档流中的位置，但不会影响其他元素的布局。

position：relative 相对定位，
在一个相对定位的元素上设置top,left,bottom,right会使其偏离正常位置。其他的元素的位置并不会受该元素的影响发生位置改变（来弥补他偏离后剩下的空隙）。
在这里插入图片描述
在这里插入图片描述

一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 6458
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
使用 HTML、CSS 和 JavaScript 定制私人版的刮刮乐【一看就会】
热门推荐
孤寒者的博客
08-24 20万+
刮刮乐想必大家都玩过，小时候兜里一有钱，就喊上小伙伴兴冲冲的跑去家旁边的小卖部，用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱，满眼期待的刮着买来的刮刮乐，心里早已想好中了100块钱大钞要去买好多好多辣条、卡片、陀螺、奥迪双钻的悠悠球… 认认真真看完本文，你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦！（当然如果你没有女朋友的话，也可以用你珍藏多年的美女图片哦！）
css之relative
02-07 210
一、relative对absolute的限制作用 1、限制left/top/right/bottom定位。absolute默认是在也没的左上角，当父类设定为relative,absolute就被限制在父类的区域内，设定top/left/right/bottom时，起始点为父类的左上角 2、限制z-index层级。页面中的俩个absolute的z-index不同且不为auto，...
CSS属性之relative
baie2621的博客
01-28 185
0.相对定位relative特点 相对定位relative元素总是会占据位置，所占据的位置是在relative元素没有设置left/top/right/bottom属性时的位置； 相对定位relative元素在设置定位时，不会影响其他元素； 相对定位relative元素在设置定位时，是相对于自身的定位 <div class="page"> <div c...
纯css3实现渐进点点loading效果
11-20
在本文中，我们将深入探讨如何使用纯CSS3技术来创建一个引人注目的渐进点点Loading效果。这种效果在网页加载或者数据处理时非常常见，可以为用户提供一种视觉反馈，让他们知道系统正在忙碌并即将完成任务。我们将...
基于 CSS 的轮播图样式实现解析
2401_86782608的博客
04-06 942
通过上述 CSS 代码，我们实现了一个具有立体效果的轮播图样式，包括轮播图容器、图片项、控制按钮和小圆点指示器。代码中使用了绝对定位、透视效果、过渡效果等 CSS 特性，使轮播图更加美观和交互性强。在实际应用中，可以结合 JavaScript 实现轮播图的自动切换和手动控制功能。希望本文对大家理解和使用 CSS 实现轮播图样式有所帮助。
Formul-rio:Primeiroformuláriousando CSS e HTML
03-06
学习这个例子可以帮助你理解如何从零开始设计和构建一个功能完备且视觉上吸引人的表单。 总之，HTML和CSS是构建网页表单的基石，它们结合使用可以创建出既有功能又具有美观性的用户界面。通过深入理解和实践，你...
＜CSS练习＞ 淘宝轮播图案例 含素材（CSS定位）
weixin_47816527的博客
06-19 718
本案例综合了CSS定位的使用以及一些前端基础知识的结合 效果图如下： 首先主要图片设置为一个大盒子 左按钮利用绝对定位 设置在主要图片的左中位置 右按钮同理 下面的5个点 设置为主要图片的中中位置 参考上一篇博客： 添加链接描述 ...
CSS中的相对定位(relative)
BlueDreamerr的博客
07-13 3625
本人的另一篇文章已经讲过绝对定位，这篇文章我们来说说css中的相对定位。 css中有四种定位：默认，绝对（absolute），相对（relative），固定（fixed）， 话不多说，先把代码贴出来： <!DOCTYPE html> <html> <head> <title>absolute</title> ...
CSS深入理解之relative
qq_25178609的博客
07-11 1万+
今天看到一个特别有趣的视频，讲解position：relative，听完这个老师生动的讲解，瞬间就懂了 看完漫画做个总结啊： 1 . position:absolute; 他的意思是绝对定位，默认上溯父级元素，找第一个不是 static 的元素，以其为 absolute 的基准。如果设定TRBL并且父级没有设定position属性，那么当前的a
剖析CSS relative相对定位用法
appteam_vlctech的专栏
06-13 612
本文向大家介绍一下CSS relative相对定位的概念，如果对一个元素进行相对定位，它将出现在它所在的位置上。 CSS relative相对定位 设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。 CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素
CSS 相对|绝对(relative/absolute)
tanzhengyu的博客
04-20 594
原文地址：点击打开链接  一、position:absolute与float:left是近亲 position:absolute与float:left两者有两大共性：包裹性，破坏性。 包裹性 包裹性换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度。哦，举个
html div relative,CSS relative怎么用？
weixin_35766215的博客
06-22 336
首先我们来简单看一下relative(相对)定位的概念根据W3C上的定义我们可以知道相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。简而言之，设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。看完了cssrelative(相对)定位的概念后，我们...
CSS-----相对定位、绝对定位
最新发布
s3414881093的博客
06-11 165
例如，top：50px就相当于本体在新体的上面50px，left：50px就相当于本体在新体的左边50px（因为数值可以是负数，所以两个方位就可以进行定位。可以发现，比起相对定位，绝对定位的数值比较大，因为绝对定位是本体进行了漂浮，所以定位是相当于全局的，同时因为是本体进行漂浮，后来的可以直接顶替它原本的位置。如上所见，定位也可以说是漂浮起来之后会盖住下方的内容，但倘若都进行了漂浮，就遵循后来追上原则，同时定位也是可以超出画面的。）、下（bottom）、左（left）、右（right）
CSS中相对定位relative
李昆鹏的博客
05-17 9165
-------------------------------------------CSS中相对定位relative----------------------------------- 相对定位相对定位是一个非常容易理解的概念，如果对一个元素先对定位，可以设置其水平位置和垂直位置，这个元素相对于元素的起点开始移动。注意：在使用相对定位的时候无论是否进行移动，元素仍然会占据原有的空间，因此移动元...
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
Z_CH8648的博客
11-23 3万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 position 属性指定了元素的定位类型，用于指定一个元素在文档中的定位方式。
深入理解CSS权威指南第四版的代码实践
- 书籍概述：《CSS权威指南》是一本详细介绍CSS（Cascading Style Sheets，层叠样式表）的权威著作。第四版作为该系列书籍的最新版本，涵盖了CSS在现代网页设计和开发中的应用，是学习CSS的重要参考资料。 - 书籍...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值