css中position的relative和absolute的使用

已于 2022-06-22 10:58:58 修改
阅读量213 收藏
点赞数
分类专栏： 前端 文章标签： css html 前端
于 2022-06-22 10:56:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duanyun8/article/details/125405205
版权

简单介绍一下两者的定义，阐述如何联合使用
relative:
1：改变的位置是相对于自己原来的位置，是文档流，会影响页面上下结构
eg:relative使用介绍
position:
1：改变位置相对于html，不是文档流，不会占用页面结构
2：如果父元素存在position如relative，则会跟随父元素的位置定位
eg:absolute使用介绍
几个position的介绍

duanyun8
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
定位position总结
beeliang
04-13 7290
1.定位position 属性值： 绝对定位 position：absolute （不保留位置 脱离文档流） （1）没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏 如果修改了元素大小 使得浏览器最大最小值改变，还是相对于之前的 并不会改变 （2）有父元素且父元素有定位，参照物是父元素 一般是设置子绝父相 可以设置top、bottom、left、right 值控制相对位置 固定定位 fixed：相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bott
Vue进阶（幺肆叁）：如何用绝对定位（position:absolute）完美定位布局及其注意事项
IT全栈 华强工作室
09-10 1万+
在《Vue进阶（幺肆贰）：CSS-静态定位，相对定位，绝对定位，固定定位的用法和区别详解》一文中，讲解了常用的几种定位方式。此博文主要讲解如何应用绝对定位实现完美布局，及应用注意事项。在布局过程中我们经常用到绝对定位，很多初学者在一开始用绝对定位经常会达不到预期的效果，因为它们往往会忽略使用绝对定位的两个条件。什么？使用绝对定位还要条件？当然要啦！代码又没有脑子，没法自己思考应该定位到哪里。为了使用的时候方便，使用绝对定位的时候要满足两个条件。在讲这两个条件的之前，我们要先提一个概念——标准流。什么是标准流
定位position（绝对定位absolute 相对定位 relative）
爱玩亚索的程序员
03-18 1万+
文章目录定位固定定位相对定位绝对定位粘性定位 定位 固定定位 position 规定元素的定位方式(类型) static 默认值，没有定位(写和不写一样) fixed 固定定位，会让元素生成 固定定位的元素 固定定位元素 永远是根据 浏览器的显示窗口 作为 定位位置的参考起点的 特点： 1、固定定位会使元素脱离文档流 2、元素在成为固定定位后，在没有规定固定宽度的情况下，宽高由内容撑开 3、固定定位会使元素产生块级框，不论任何类型的元素使用了固定定位后就都可以设置宽高了
relative和absolute的使用(详细+案例)
qq_48968669的博客
05-10 1331
相对定位relative：相对于自己原先的位置而调整位置 eg: 原先位置（在没有加top,left,right,bottom调整位置） 根据原先位置加top而调整定位 绝对定位absolute：absolute(子)+relative(父)是固定搭配，如果父元素或祖先元素没有设置相对定位relative，则根据浏览器而定位 eg: absolute(子)+relative(父)的搭配使用 (有absolute一定要有relative) 如果父元素没加relative,则absolute会寻找离他最
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
热门推荐
Z_CH8648的博客
11-23 3万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 position 属性指定了元素的定位类型，用于指定一个元素在文档中的定位方式。
css position: absolute、relative详解
10-30
今天在看CSS的时候遇到了position: absolute、relative的问题，一直比较迷糊，今天终于搞清楚了。
css中定位中的absolute和relative是什么意思
01-19
Position属性有四个值：static、fixed、absolute和relative， 后面两个在布局中的定位里是经常用到的，顾名思义， absolute是指绝对定位，即将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对...
css中position属性(absolute|relative|static|fixed)概述及应用
09-22
position属性的相关定义：static：无特殊定位，对象遵循正常文档流;relative：对象遵循正常文档流;absolute：对象脱离正常文档流fixed：对象脱离正常文档流，有兴趣的朋友可以参考下哈
css中position属性使用详解
09-25
positon有4个属性:static relative absolute fixed，我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么...
position：absolute绝对定位的使用
一个小白的成长历程
12-03 4318
position定位的使用 相对定位（relative）：相对于块级元素（或行内块）自身位置进行定位； 绝对定位（absolute）：绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的（默认是body）； 绝对定位的偏移量的top/bottom,left/right是相对于已设置relative的祖先元素 1.有定义偏移量的值（top/bottom,left/right） 是相对父元素的相对于父级元素的占位区定位（包含padding区域） 2.没有定义偏移量的值（top/bottom,left/ri
position：absolute绝对位置的正确使用
weixin_43732080的博客
04-02 5334
position：absolute设置的元素 其绝对位置相对的元素是它最近的一个父级元素 同时，该父级元素必须满足position的值是relative、absolute、fixed 偏移值由此元素的top、buttom、left、right确定 若绝对定位的元素超出其父元素的边界，想隐藏超出的部分，在其父元素里需设置overflow：hidden；position：relat...
CSS学习20：absolute（绝对定位）
玉安_ZhangDe的博客
04-09 6566
绝对定位的介绍： 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。 语法： 选择器 { position: absolute; } 1、完全脱标 —— 完全不占位置； 2、父元素没有定位，则以浏览器为准定位（Document 文档）。 3、父元素要有定位 i.元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。 ii.绝对定位的特点总结：（务必记住）...
CSS中position的absolute和relative用法
StarWithRainbow
03-11 1087
CSS中position的absolute和relative用法 CSS2.0中的定位确实有时会把人弄糊涂，所以今天给它记下来，同时供以后查阅。下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站，在此处特别的说明一下 CSS2.0中position主要用于HTML元素的定位，在实际设计中还是非常有用的。但是对于学习者来说都会遇到相对定位和绝对定位到底如何使用，非常打脑壳 不...
css定位，relative和absolute的结合使用
mysevenyear的博客
05-15 4338
1、单独使用：relative：相对于本身偏移，没有脱离文档流。absolute：相对于浏览器定位，脱离了文档流，也就是不占位置。在没有设定TRBL值时是根据父级对象的坐标作为始点的，当设定TRBL值后则根据浏览器的左上角作为原始点，如下：（没有设置TRBL） <style> body{ margin: 0; pad...
CSS 中相对定位(relative)与绝对定位(absolute)的详解
路宇的博客
12-14 6318
position:relative 相对定位详解 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。 相对定位的特点： 它是相对于自己原来的位置来移动的(移动位置的时候参考点是自己原来的位置) 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方对待它(不脱标，继续保留原来的位置)。因此相对定位并没有脱标，它最典型的应用是给绝对定位当爹的。 position:absolute 相对定位详解 绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的（拼爹型）。 绝对定位的特点： 如果没有祖
CSS基础-position: absolute绝对定位的默认位置
m0_51757444的博客
05-13 1341
绝对定位position的值为absolute时的默认位置 前言 今天上午练习定位时发现了这么一个东西： 元素设置为绝地定位后不给它添加top时是正常的我想要的结果； 添加top后还需要精确的计算。 正文 感觉你也应该开始好奇默认值是啥了，来一起看看吧： 比如这是我想要的效果 很简陋，但是调试嘛，就先这样吧，不要嫌弃~ 当我鼠标放上去时“阳阳”两个字的下面出现红色的块块， html代码是这样的： <body> <ul> <li class="it
解读absolute与relative
米灰色的天空～～
11-12 1399
 很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读。Absolute，CSS中的写法是：position:absolute;
absolute与relative的运用
管子（zero）的杂乱空间
12-05 1130
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
css position relative absolute 同时
最新发布
08-23
CSS中的position属性有多个值，其中包括relative和absolute。这两个值可以同时使用。 当元素的position属性设置为relative时，它会相对于其正常位置进行定位。也就是说，元素仍会占据文档流中的空间，并且其他元素不会被该元素覆盖。通过设置top、right、bottom和left属性，可以将相对定位的元素在其正常位置的基础上进行偏移。 相反，当元素的position属性设置为absolute时，它会脱离文档流，并相对于其最近的已定位祖先元素进行定位，如果不存在已定位的祖先元素，则相对于文档的初始包含块进行定位。通过设置top、right、bottom和left属性，可以将绝对定位的元素相对于其定位环境进行偏移。 因此，当同时设置relative和absolute时，元素会先相对于其正常位置进行定位，并且仍会占据文档流中的空间，然后再相对于定位环境进行偏移。这样可以灵活地控制元素的位置，并且不会影响其他元素的布局。 需要注意的是，relative和absolute定位的元素的定位效果会受到父元素的position属性的影响。如果父元素的position属性为static（默认值），那么相对于父元素进行定位的元素将相对于文档的初始包含块进行定位。如果父元素的position属性为relative或absolute，则相对于父元素进行定位的元素将相对于父元素进行定位。 总结起来，当同时设置CSS的position属性为relative和absolute时，元素会先相对于其正常位置进行定位，然后再相对于定位环境进行偏移。这样可以灵活地控制元素的位置，同时保持其他元素的布局不受影响。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [css position: absolute、relative详解](https://download.csdn.net/download/weixin_38501810/13075425)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [CSS（层叠样式表）笔记.txt](https://download.csdn.net/download/bxy0806/88237826)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [CSS position属性absolute relative等五个值的解释](https://download.csdn.net/download/weixin_38650629/13677169)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值