float,position,relative,absolute区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了float,position,relative,absolute区别相关的知识,希望对你有一定的参考价值。

参考技术A 在解释之前,首先说几本CSS的经典之作(要搞前台的人应该必读的):

In CSS 2.1, a box may be laid out according to three <dfn>positioning schemes:</dfn>

在css中有一个z-index属性,因为网页是“立体的”,它有z轴,这个z轴的大小就由z-index控制。默认情况下,所有页面元素均位于z-index:0这一层,而这一层顺序排列的元素就构成了“文档流”。无论是position还是float,它们都是通过改变文档流来实现定位。

css有三种基本的定位机制:文档流、浮动和绝对定位。除非专门指定,否则所有元素都在文档流中定位。也就是说,文档流中的元素的位置由元素在 X(html) 中的位置决定。css定位的基本思想很简单,它允许你使得元素相对于其正常应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置来进行定位。

CSS定位大致可以分成三类模型:普通流模型、浮动模型、和定位模型;

普通文档流:顾名思义,普通流中的元素的位置由在HTML中的位置决定,根据上下级和前后的顺序,一个一个的排列在界面上;当然根据元素的类型不一样,排列的方式会不一样,但先后顺序,显示层次关系不会改变;

<div style="background-color:Blue" mce_style="background-color:Blue">我是块级元素,我单独占一行</div>
<div style="background-color:Yellow" mce_style="background-color:Yellow">我是块级元素,我一行一行的排列</div>
<span style="background-color:Green" mce_style="background-color:Green">我的行内元素,我水平的排列</span>
<span style="background-color:Gray" mce_style="background-color:Gray">我是行内元素,没有那么霸道</span>

[图片上传失败...(image-91bedd-1527910316171)]

(一)float:

float属性定位的元素位于z-index:0层。它是通过float:left和float:right来控制元素在0层左浮或右浮。float会改变正常的文档流排列,影响到周围元素。float元素在文档流中一个挨一个排列。但注意,只是float元素之间一个挨一个排列,对于非float的元素,float元素是视而不见的,会越过它们。
float:left时,会把非float元素挤到所有float元素的右边,float:right时是挤到左边。

(二)position:

position属性包括下面四个值:

设置absolute或relative会让z-index的值大于0。不同的是,absolute完全脱离文档流,不再在z-index中保留占位符,而relative虽然自己已浮起来,但仍然会保留自己在z-index:0中的位置,因此relative在z-index:0层中的相邻元素不会因此受到影响。下面是具体用法。

1. 静态(static):

元素顺序显示,在一个文档流中,一个挨着一个,但是不像relative那样可以设置top之类的。静态定位仅仅意味着内容遵循正常从上到下的HTML流。

2. 相对(relative):

一个相对定位的元素相对它在HTML流中的当前位置而放置。移动一个带有相对定位的元素,在该元素本该放置的地方留下了一个“洞”。相对定位的主要用处不是移动一个元素,而是给行内在它内部的绝对定位的元素设定一个新的参考点。

position: relative的元素相对于自己本来应该在的位置进行偏移,偏移后的位置可能覆盖别人(是漂浮在上方)。它原来的位置也空着,因为它会被加入到文档流中。

3. 绝对(absolute):

绝对定位让你通过以pixel、em、percentage来指定一个左、右、上或者下的位置来确定一个元素的位置。此外,绝对定位的元素被完全与页面流分离,换句话说,网页上的其他东西甚至不知道这个绝对定位的元素的存在。

absolute定位的一般用法:

即,position: absolute的元素在static的父元素中是相对页面(不是浏览器窗口)进行偏移,在非static父元素中(通常是relative,因为如果父元素是absolute,那父元素还要向上找非static祖先元素)是相对父元素进行偏移。

4. 固定(fixed):

一个固定的元素被锁定在屏幕的位置上。fixed是相对浏览器窗口的固定位置定位,如网页中的“回到顶部”按钮。

注意:不要试图给同一个样式既应用float属性又应用任何一种定位,除了静态或者相对定位之外。浮动和绝对或者固定定位不可能同时作用在同一个元素上。

CSS中float与position的总结归纳

1. 使用float的元素,文本会围绕在其周围,而postion会直接覆盖文本

2.position中的relative和absolute的区别详见:https://blog.csdn.net/zzz365zz/article/details/79104063

以上是关于float,position,relative,absolute区别的主要内容,如果未能解决你的问题,请参考以下文章

CSS中的Position属性和Float属性

positio:absolute与position:relative的区别

三列布局

格式布局

层模型--相对定位(position:relative)

position和float小结