position: relative（position: relative;,单独这个有什么用）
本文目录
- position: relative;,单独这个有什么用
- 谁能帮我解释一下在html里position: relative;是什么意思
- position的值relative和absolute定位原点是
- css的position-relative兼容问题与解决办法
- div style=“position:relative“是相对谁的位置，大概怎么用，用负值会不会出错
position: relative;,单独这个有什么用
position：absolute这个是绝对定位；是相对于浏览器的定位。比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。比如：《div class="1"》《/div》《div class="2"》《/div》当1固定了位置。1的样式float:left;width:100px; height:800px;2的样式为float:left; position：relative；margin-left:20px;width:50px;2的位置在1的右边，距离120px
谁能帮我解释一下在html里position: relative;是什么意思
position: relative; 相对定位。
相对于其父级元素来定位。
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
absolute 绝对定位 ，通过 top,left 样式来绝定元素位置。
position的值relative和absolute定位原点是
relative（相对定位）：定位原点是元素本身所在位置；
absolute（绝对定位）：定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的
absolute
生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
生成相对定位的元素，相对于其正常位置进行定位。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit
规定从父元素继承 position 属性的值。
css的position-relative兼容问题与解决办法
开发中遇到了使用相对定位，发现谷歌浏览器和QQ浏览器渲染的方式不一样，对应父级定位不同
解决办法
把需要定位的元素放在父级中的第一个子元素的位置
在实际使用中发现一个兼容性的问题，position:relative是指针对上级目录的相对决定定位，他是浮动在页面上的，但是相对父级是占有空间的，实验证明他们的top属性针对的对象不一致：firefox chome IE7、8等不会出问题，就是针对他的直接parent y坐标定位，但是遨游、腾讯等ie内核的包装浏览器就会不一样，他们针对的是书写位置的上一个直接对象，这样做出来的浮动层在浏览器下就不兼容了，y坐标不统一
div style=“position:relative“是相对谁的位置，大概怎么用，用负值会不会出错
定位分为相对定位绝对定位和其它定位。最常用的就是前两种。
position:relative就是相对定位，它相对于原有位置移动，但是，他移动了以后，他的以前的位置的空依然存在；
用法：div{position:relative;top:20px;left:30px}
意思就是那个盒子相对于原有的位置移动（向下移动20px；向右移动30px）
position:absolute就是绝对定位，它相对于父元素进行定位，他不占原有位置
不明白的可以追问。。。。。。。
更多文章：
2026年5月7日 16:40
2026年5月7日 16:20
2026年5月7日 16:00
2026年5月7日 15:40
position: relative（position: relative;,单独这个有什么用）
2026年5月7日 15:20
2026年5月7日 15:00
免费数据库空间（8U免费空间有多大带数据库吗支不支持PHP）
2026年5月7日 14:40
html5按钮（html5有button如何点击按钮跳转网页）
2026年5月7日 14:20
2026年5月7日 14:00
2026年5月7日 13:40
