relative attribute of positon_html/css_WEB-ITnose

margain-left:15px,top:10px,

当使用positon的relative属性 的时候，什么时候是相对于原来的位置移动,什么时候是相对于这个div的父元素移动啊，因为我是自学的，所以有点时候书上作者说相对于原来又说相对于 自己  我晕了请人指教

回复讨论(解决方案)

使用绝对定位的盒子以它的“最近”的一个“已经定位”的祖先为基准进行偏移。如果没有已经定位的祖先元素。那么会以body元素为基准进行定位。偏移的距离通过top、left、bottom、right的属性来确定。
使用相对定位的盒子，会相对与它原本的位置，通过偏移指定的距离来到达新的位置。

不是吧 我怎么看书上是这么说的 绝对定位是以浏览器 左上角为基准。相对定位 是以父元素还是以自己为基准是不一定的

绝对定位(absolute)：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据body对象左上角作为参考进行定位。绝对定位对象可层叠，层叠顺序可通过z-index属性控制，z-index值为无单位的整数，大的在最上面，可以有负值(目前负值FF不支持)。

　　相对定位(relative)：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

 相对定位和绝对定位都是相对于父div标签的。 
 相对------以这个元素的本来应该在的位置为参照点 
 绝对??以父div标签的原点（左上角）为参照点。
 
由于外层是position:relative，所以里层是absolute的话，则会以外层的左上角为位移参考对齐。当然外层只写position:relative，写上left,top这两个值，则表示以：以这个元素的本来应该在的位置为布局参照原点进行left,top对齐。
 
还有一种情况是，只是一个position:absolute;外层没有position:relative，这时会找寻那个点为参考呢？这时候的原则是：如果某父级元素中有relative者，则以某父级元素为参考原点，如果没有position:relative，则以body为参考原点。如果position:absolute外层没有relative时，这两个布局上是没有区别的。
 
当然最后一种情况是：外层是：position:absolute;里边是position:relative，那会是什么情况？按着原来的原则，absolute会参考body为布局原点，relative会参考他本来应该在的位置为布局原点，这时候其实就是参考外层左上角为布局原点。

不是吧 我怎么看书上是这么说的 绝对定位是以浏览器 左上角为基准。相对定位 是以父元素还是以自己为基准是不一定的 LZ 你的啥书啊是 赶紧扔了吧 误人子弟啊 一般的基本问题都可以在w3school上找的到的

position:relative  相对位移

也就是 该元素的 视觉位置（眼睛看到的位置） 全部相对于 该元素的原始位置（即该元素 如果默认使用position：static时候的位置）

注意这个时候  视觉 位置 动了 但是他本身在 文档流中占的 位置 没变

支持自学成才。。。

嗯不过还是不会使用

absoult是绝对定位，relative是相对定位，两个定位会根据他们的父级元素定位，比如你写一个：

If positioning is added to the p tag and the div is not positioned, then the p tag will search for the upper level tag until after the body, and it will be positioned according to the
body.
If relative positioning is added to the div, the tag p will be positioned according to the div.
Generally, the parent element you want to position uses relative, and the child elements can use absolute or relative.
You will see the effect if you try it more often

I am also very dizzy.

Simple and easy to remember

Change this parameter top / left

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn