position各种

最新推荐文章于 2025-05-17 10:21:20 发布
原创 最新推荐文章于 2025-05-17 10:21:20 发布 · 170 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解释了CSS中position属性的不同值及其工作方式。包括static、relative、absolute定位的区别，特别是absolute定位相对于最近已定位的祖先元素而非原始位置的特点，以及relative定位如何使元素相对于其自身进行偏移但仍保持在文档流中。 

position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static） 

如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。 

absolute是相对于自己最近的父元素来定位的，如果你不给#demo相对定位，那么#sub的绝对定位就是相对于body来定位的。 

relative是相对于自己来定位的，例如：#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。

另：relative 不脱离文档流，absolute 脱离文档流。也就是说：relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。absolute的元素不仅位置改变了，同时也脱离了文档流
u010985901
关注
CSS中的position:relative;的作用示例介绍
12-10
引用 static : 　无特殊定位，对象遵循HTML定位规则 absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框 relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 fixed : 　IE5.5及NS6尚不支持此属性 "对于页面中一个static的div#demo，我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该是用这个position:relative
JS解决position:sticky的兼容性问题的方法
11-30
在前端开发中，`position: sticky` 是一种CSS布局属性，它允许元素在滚动到某个阈值时在页面上保持“粘性”。然而，`position: sticky` 在...这种方式保证了布局在各种环境下的稳定性，同时也提供了良好的用户体验。
position:relative 的深入理解，欢迎探讨
mixer_a的专栏
05-25 405
对于css中的position:relative;我始终搞不明白它是什么意思，有什么作用？ 对于position的其它几个属性，我都搞懂了 引用 static : 　无特殊定位，对象遵循HTML定位规则 absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边...
position之relative
lbs311709000127的博客
01-18 6737
position：relative 作用：是元素成为containing-block，可定位的祖先元素。意思就是绝对定位是的参照元素 特点： 可以使用top|right|bottom|left|z-index进行相对定位，相对的是常规流中自己的位置。 相对定位元素不会离开常规流，意思就是其原来的位置还在，不会被其他后面的元素占有 任何元素都可以设置为relative，...
CSS 元素的定位之相对定位 position: relative
歪脖先生的博客
02-21 1万+
定位在CSS中，通过 position属性来对元素进行定位，可选的定位类型有 static | relative | absolute | fixed，默认值为 static，表示没有定位，元素保持在它原本应该在的位置上。要对页面元素使用定位技术，必须 position属性设置为 static 之外的其它 3 个属性值，即相对定位、绝对定位、固定定位。相对定位当一个元素的 position属性设置...
神奇的position:relative;
weixin_34408717的博客
07-17 337
我承认我又标题党了，这里想说的是相对定位的设置有时候会起决定性的作用，比如在是否随滚动条移动时的控制。 先上两个示例： position:static; .parent{ display:block; /*position:relative;*/ width:200px; height:100px; overflow:auto; background:lightblue; } .pa...
jQuery position() 函数详解以及jQuery中position函数的应用
11-22
在实际应用中，`position()`常用于实现各种动态效果，如居中显示、弹窗定位、拖拽功能等。例如，当需要创建一个对话框并使其相对于某个特定元素居中时，可以先获取目标元素的位置，然后计算出对话框的居中坐标，并...
CSS的position属性在DIV层中的应用
09-25
CSS（层叠样式表）是一种用来表现HTML或XML文档的样式的计算机语言，它能够控制网页的布局...无论是创建图片轮播下方的文字描述，还是制作各种自定义的布局效果，掌握position属性的使用都是前端开发者必备的技能之一。
CSS:position:relative;的认识
天地会
03-23 5686
 CSS定位的原理把浏览器窗口想象成一个坐标系统：CSS定位的原理是：你可以将任何盒子（box）放置在坐标系统的任何位置上。采用CSS定位技术来放置元素是非常精确的。相对于使用表格、透明图像或其他方法而言，CSS定位要简单得多。 绝对定位一个采用绝对定位的元素不获得任何空间。这意味着：该元素在被定位后不会留下空位。要对元素进行绝对定位，应将position属性的值设为a
CSS中的position:relative;的作用
jiuduan2009的专栏
04-09 1251
"对于页面中一个static的div#demo，我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该是用这个position:relative这个吧，然后再加上top,right给限制一下。 position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static） 如果你想让这个
position：relative
热门推荐
weixin_44874595的博客
07-30 5万+
1.当将块的position属性设置为relative时，与设置为absolute完全不同，这时子块是相对于其父块来作为参照对象偏移定位，而不是相对于浏览器窗口，并且相对定位的块元素脱离标准流浮上来后，无论是否进行移动，其所占的位置仍然留有空位，后面的无定位块元素不会移动上来，因此，移动元素会导致覆盖其它框。 <!DOCTYPE html> <html lang="en">...
CSS属性详解——position:relative
Wod_7的博客
06-04 6656
CSS中的相对定位relative定位是一种定位方式，与绝对定位absolute定位不同的是，相对定位是根据元素在正常页面流中的位置来定位。相对定位使元素相对于其原始位置上下左右移动。这个过程并不会使元素脱离文档流。
相对定位
peichaohang的博客
12-26 5551
position设置元素定位 - 通过position属性来设置元素的定位 -可选值： -static：默认值，元素没有开启定位 -relative：开启元素的相对定位 -absolute：开启元素的绝对定位 -fixed：开启元素的固定定位（也是绝对定位的一种） 当元素的position属性设置为relative时，则开启了元素的相对定位： 1.当开启了元素的相对定位以后，而不设...
CSS- 4.2 相对定位（position: relative）
最新发布
HRDMN的博客
05-17 1406
本文讲述相对定位（position: relative）是CSS定位属性中的一种，它允许元素相对于其正常文档流中的位置进行偏移，同时保留其在文档流中的原始空间。相对定位的元素会保留原始空间，位置只是相对于自身的偏移，且不影响其他元素。下面跟小编开始今日的练习吧！
浅谈position:relative
weixin_30292843的博客
09-01 387
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> ...
CSS position绝对定位absolute relative
飘过的春风
10-12 906
DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位，比如我们让一个层位于一个层内具体什么位置，为即可使用position:absolute和position:relative实现。 一、position语法与结构 - TOP position语法： position : static absolute r
操作元素之修改样式属性
leechoy
06-12 812
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
position:relative 详解
湛庐无方
03-04 6416
position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位. relative和absolute的另外一个很重要的区别就是当被定义成absolute的对象被移出了，那么他原来的位置也就不存在了， 如果被定义成rela
position:relative
kingisking1的专栏
09-17 586
#A{ positon:relative}#B{ positon:absolute; top:5px; left:5px;}   /*这里定位时还可以用right和buttom*/这时B的位置就是相对于A的位置了
块级元素与position理解
通过精细调整margin、padding、width、height以及负外边距，可以实现各种复杂的网页布局效果。同时，随着CSS3的引入，更多的布局模式如Flexbox和Grid使得垂直居中和复杂布局变得更加简洁和直观。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值