position中的absolute与relative的区别

Position（位置）属性值需要注意的地方

position的属性有：

Absolute：绝对定位，是相对于最近的且不是static定位的第一个父元素来定位，元素位置通过“right”“top”“left”“bottom”属性进行规定。

Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动

Relative：相对定位，是相对于其原本的位置来定位的

```
Static：默认值，没有定位
```

Inherit：继承父元素的position值。

absolute和relative的区别

relative设置的div宽度和父类的div宽度相同，所以给子类一定宽度时，父类随之变化。
而absolute不会。

relative特点：

 1）不影响元素本身的特性；2）不使元素脱离文档流（元素移动之后原始位置会被保留）；3）如果没有定位偏移量，对元素本身没有任何影响；4）提升层级。

absolute特点：

 1）使元素完全脱离文档流；2）使内嵌支持宽高；3）块属性标签内容撑开宽度；4）如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移；5）相对定位一般都是配合绝对定位元素使用；6）提升层级

文档流概念：

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。每个非浮动块级元素都独占一行，
浮动元素则按规定浮在行的一端。若当前行容不下，则另起新行再浮动。内联元素也不会独占一行。
几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素。
有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位，固定定位。但是在IE6中浮动元素也存在于文档流中。

position中的absolute与relative的区别相关推荐

Position属性四个值：static、fixed、absolute和relative的区别和用法
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
position：absolute与relative的区别
Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,在没有 ...
position的值，以及absolute和relative的区别
在 CSS 中,元素的 position 属性有五种取值: static:默认值,元素按照正常的流动方式排列. relative:元素的位置相对于它在正常流中的位置进行定位. absolute:元素的 ...
position属性的absolute和relative的理解
概述: 每个定位的意义:相对定位是"相对于"元素在文档流中初始位置的,而绝对定位是"相对于"最近的已经定位的祖先元素. 主要: (其实对于定位的理解,主要问题是 ...
htm——position:static、absolute、relative详解
前言接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...
css中position的两种定位（absolute、relative）
[position:absolute] 意思是:绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位. 如果没有TRBL,以父级的左上角,在没 ...
探究position定位中absolute和relative的异同
相信学过CSS的同学都曾经对于position的各种属性很困惑,尤其是absolute和relative定位,简直就是傻傻分不清,笔者写这篇文章就是希望通过代码实验的方式来揭露absolute和rel ...
css中position属性（absolute/relative/static/fixed）
css中position属性(absolute/relative/static/fixed): position:static 无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top ...
position absolute 与 relative 区别
position absolute 与 relative 区别 absolute 绝对定位元素可以放置到页面上的任何位置 relative 相对定位会按照元素的原始位置对该元素进行移动

position中的absolute与relative的区别

position的属性有：

absolute和relative的区别

position中的absolute与relative的区别相关推荐

最新文章

热门文章