HTML中的绝对定位和相对定位

最新推荐文章于 2023-08-30 20:03:26 发布
最新推荐文章于 2023-08-30 20:03:26 发布
阅读量241 收藏 1
点赞数
分类专栏： html 文章标签： html 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43575703/article/details/104733375
版权

https://www.runoob.com/w3cnote/css-position-static-relative-absolute-fixed.html
relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局。

absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位；在父元素没有设置absolute或relative时，元素相对于根元素（即HTML元素）定位；若父元素设置了absolute或relative，此时元素相对于父元素定位。

_Clarity_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 相对定位 绝对定位 浮动 分析
12-09
CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 如果将 top 设置为 20px，...
HTML的相对定位和绝对定位
weixin_60222412的博客
08-12 9614
相对定位和绝对定位的概念，语法，以及固定定位和z-index的用法
定位的概念（HTML）
原地起飞
07-31 1450
文章目录前言HTML中为什么需要定位？一、定位1.定位的组成2.定位模式1、static 静态定位 (默认)2、relative 相对定位3、absolute 绝对定位4、fixed 固定定位5、粘性定位sticky （了解）总结 前言 HTML中为什么需要定位？ 1、浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子 2、定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子 一、定位 1.定位的组成 定位=定位模式+边偏移 &nbs
css中的定位以及绝对定位和相对定位的区别
wrx200077的博客
09-15 1919
一：绝对定位 （position: absolute） 绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。 绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序。 特点： 相对于 自己原来在标准流中位置来移动的 原来在标准流的区域继续占有，后面的盒子仍然
HTML定位
weixin_52173610的博客
08-30 3815
在 HTML 中，可以使用 CSS 来对元素进行定位。常见的定位方式有相对定位(relative)，绝对定位(absolute)，固定定位(fixed)，和粘性定位(sticky)。- 相对定位(relative)：元素相对于其正常位置进行定位，通过 top、bottom、left、right 属性来指定偏移量。- 绝对定位(absolute)：元素相对于其最近的已定位祖先元素(非 static 定位)进行定位，或者相对于文档的初始坐标定位。
html元素相对定位和绝对定位
YuTinH的博客
05-24 1846
元素相对定位： 定位： 一般来说用两个就足够了（上下选一个左右选一个） 注意，这里不会脱离文档流 元素绝对定位： position：absolute即开启绝对定位，还是设置两个偏移量，不过是参照物不同了。 元素固定定位： 可以在实战中用来做固定在某个位置的东西（譬如点一下返回顶部） 元素的层级： 父元素的层级再高，也不会盖住子元素。 也就是说子元素永远在父元素上边。 ...
相对、绝对和固定定位的比较
01-19
一、相对定位（relative） 首先，说一个文档流的概念，有时候也叫做文本流。“流”表示连续不断的意思，比如“流媒体”，这里的文档（文本）流指的是源程序里面的代码，也就是html里面 的标签。 测试代码： 复制...
css教程之绝对定位使用详解
12-13
如果说相对定位没有脱离文档流，相对于对象本身进行偏移有点拖泥带水的话，那么绝对定位绝对是快刀斩乱麻，因为绝对定位可以使一个对象脱离正常的文档流，好像是漂浮在正常文档流的上空,并相对于包含此对象的元素...
jquery获取html元素的绝对位置和相对位置的方法
01-19
绝对位置坐标： 代码如下: $(“#elem”).offset().top $(“#elem”).offset().left ...absolute(绝对定位):是相对父元素来说的，如果父元素中有relative，那么该元素的位置是经过计算后的结果。即absolute定位的参
有关绝对定位的全面理解
01-21
<!DOCTYPE html><html><head><meta charset=UTF-8><title>有关绝对定位的理解<.../* 1..../*2. 绝对定位使元素的位置与文档流无关，因此不占据空间。...这一点与相对定位不同，相对定位实际上
定位position（前面布局无法实现
采菊东篱下，Python满乾坤！
08-29 814
文档流 文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。 定位： 1、relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。 2、absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解
html中的定位知识点如何使用
小魏快起床的博客
11-23 3998
系列文章目录文章目录前言一、定位是什么？有什么用？二、定位方式有哪些？怎么使用？ 1、静态定位：就是默认的定位方式，意思就是没有定位; 2、相对定位： 3、绝对定位： 4、固定定位：固定定位永远参照于浏览器的视口进行定位三、相对定位解析： 1、 这里我们先用标准流写一个小demo： 2、得到一个效果图 ，是一个大盒子里面嵌了2个小盒子的效果：3、这个时候我要开始给盒子2号加相对定位，然后让其进行
HTML四种定位-绝对定位
Jack, what else can you do besides holding your little darling?
12-04 7934
HTML四种定位-绝对定位
一看就懂，关于HTML5里面的定位 （position ）相对定位，绝对定位，固定定位 ，粘性定位；有图有对比 值得你的信赖（一个在千锋逆战班奋斗的年轻人）
vipdidi的博客
02-23 3075
*HTML5 定位## position:static(默认值)没有定位 position:relative(相对定位) position:absolute(绝对定位) Position:fixed(固定定位) position:sticky(粘性定位)（css3新增兼容不好） 作用 A.在正常情况下.可以让一个元素覆盖在另一个元素上面 B.可可以移动一个元素的位置 C.可以固定某个容器在浏览...
CSS的简单学习（6）
wqksoul的博客
11-28 378
实训
html定位
cloarl的博客
03-07 426
定位的分类以及应用
HTML里元素定位的介绍与基本应用
L20220927Y的博客
10-19 451
HTML里元素定位的介绍与基本应用
【HTML+css】css定位 （相对定位 绝对定位 固定定位 粘性定位）
weixin_63436826的博客
07-18 546
过一定阈值之后，会被当成 fixed定位，相对于视口进行定位。最初会被当作是relative，相对于原来的位置进行偏移；不管页面如何滚动，他都永远固定在那里， 相对浏览器窗口定位，不随页面滚动改变位置。页面滚动时，滚动到顶部，直接吸顶。3.逐级往上找，相对碰到的第一个有定位属性的父盒子定位，为了让绝对定位有定位点，一般会给他的父盒子加相对定位。相对盒子自己原来的位置进行调整，称为相对定位。2.父级有定位属性时，相对父级盒子定位。页面滚动时，滚动到顶部，直接吸顶。如果没有，就相对浏览器定位。
html相对定位绝对定位
最新发布
09-08
HTML中的相对定位和绝对定位是两种常用的定位方式，用于控制元素在页面中的位置。 相对定位（Relative positioning）是相对于元素在正常文档流中的位置进行定位的。通过设置元素的 left、right、top、bottom 属性来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值