最近在学习css,有个疑问,用relative+top与用float+margin-top有什么区别,感觉都能有同样效果

zealer
  • 124
.exam{
    position:relative;
    float:right;
    top:10px;
}
.exam2{
    float:right;
    margin-top:10px;

}
回复
阅读 5.8k
6 个回答
✓ 已被采纳

那就在这里稍微详细介绍一下relative absolute和 float吧

1.position:relative和position:absolute都可以激活left、top、right、bottom和z-index属性(默认情况是不激活的,设置了也是无效的),在默认情况下,所有元素都是在z-index:0这一层,这就是所谓的文档流
当设置relative和absolute时,元素其实会浮起来,即z-index大于0,不同的是relative会保留自己在z-index:0中的占位;而absolute会完全脱离文档流。absolute的left、top之类的属性是相对于自己最近的一个设置了relative或者absolute的祖先元素,如果找不到,则相对于body
2.float也是可以改变文档流的,但是它不会让元素浮起到另外一个z-index层,它让元素仍然保持在z-index:0层,它是无法通过left、right属性来准确控制元素坐标的,而是通过float:left或者float:right控制元素在同层的左浮动或者右浮动。同时,float会改变正常的文档流排列,影响到周围元素。
3.还有一个很明显的区别,你可以去firbugf12验证一下:ansolute和float会隐式改变元素的display属性类型,无论什么类型的元素(除了display:none),只要设置了position:absolute或者float:left,元素都会以display:inline-block的方式显示(即可以设置长宽,默认宽度不满足父元素),而position:relative不会改变display属性。

EdwardUp
  • 5.9k

看题主的代码,主要是说margin-topposition: relative + top的组合之间的区别(它们看起来都可以做垂直方向位置偏移):

(1). 请理解两个样式设置的概念,布局渲染。布局是指,在当前样式设置下,由浏览器计算得到的页面各元素的位置。渲染是指,最终在浏览器内呈现为可视内容的情况,是一种视觉效果。它们都由浏览器实现,布局计算在前,视觉渲染在后。

margin-top来实现位置偏移,是修改了布局。而·position: relative + top的组合实现位置偏移,并不修改布局,而是修改渲染,是一种单纯的视觉效果,这种方式也常会带来和相邻元素重叠的情况。

用一个例子可以体会一下不同。在一个父元素内排列多个题主给的.exam元素,那么效果是这样:

图片描述

排列多个.exam2元素,则是这样:

图片描述

(2).position: relative还有很多其他作用,这样和top等属性搭配修改视觉渲染的位置,只是其中一种用法。毕竟,topmargin-top是两个不同的样式属性。

position:relative;本身有很多作用,你这里没用到而已

这么说不如用

position:absolute;
top:xx;

关键在于float让元素脱离了文档流,影响很大,单独一个元素比较可能看不出来,你加几个不带float的同级元素对比一下,看看

补充楼上的答案,
在布局的时候 使用 position: relative 之后,尽量不要用 top, left, right, bottom 等属性去指定它的位置,因为它在文档流中的位置没有被释放,很容易造成其他元素排列布局不对的问题。

position: relative 更多的是用在,它的 子元素 需要固定在 它 的哪个位置显示时用的。

比如说:

.outer {
  position: relative;
}
.inner {
  position: absolute;
  top: 10px;
}

<div class=“outer”>
  <div class=“inner”></div>
</div>

其中的 top: 10px 就是相对它的父元素 .outer 。

如果 .outer 中没设置 position 属性,就会继续往上找,直到 body 元素。

宣传栏