两者共同特点是: 改变文档流 激活元素left.top.right.bottom.z-index属性 让元素”浮起来“,z-index>0 不同的是: 1.position:relative 会保留元素自己在z-index:0层的占位,其left.top.right.bottom是相对于自己在z-index:0层的位置. 2.position:absolute 完全脱离文档流,不保留元素自己在z-index:0层的占位,其left.top.right.bottom是相对于自己最近的定义为abso…

absolute 能让元素 inline-block 化: 例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度. float 可以 inline-block 化元素 float 的破坏性:使高度塌陷 absolute 的破坏性:使高度和宽度都塌陷 absolute属性的 破坏性:高宽占据空间为0的特性, 定位性:借助left/top等属性的定位 少用absolute,常见absolute布局的替代实现方案: 使用marg…

display的值: block 像块类型元素一样显示. none 像行内元素类型一样显示. inline-block 像行内元素一样显示, 但其内容像块类型元素一样显示. list-item 像块类型元素一样显示,并添加样式列表标记. position的值: absolute absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位,若父元素都没有定位则相对于html的根元素 (浏览器窗口)定位. fixed fixed (老IE不支持)生成绝对定位的元素,相…

(absolute:生成绝对定位的元素) position属性用来规定元素的定位类型和方式 ①position:static 默认值,没有定位,元素出现在正常的流中: ②position:fixed  固定定位 是相对于浏览器窗口来进行定位: ③position:relative 相对定位  相对于其本身正常位置来进行定位,它原本所占的空间仍保留: ④position:absolute 绝对定位 相对于定位方式不是static的第一个父元素进行定位(往上寻找参照元素,一直到根元素为止,即body…

阿基米德说“给我一个支点,我能翘起整个地球”,在HTML页面中,给你一个坐标,可以把任何一个元素定位目标点,这就是定位!CSS有三种基本的定位机制:相对定位.绝对定位.固定定位,决定定位的position属性的值有static默认标准流,当然这个就不用多说了:fixed固定定位,releative相对定位,absoulte绝对定位,结论如下:1.定位配合坐标点top bottom left right;2.相对定位相对于自身位置自增或者自减,坐标起点是原来所在位置;3.absolute绝对定位找…

css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. position可选择的值一共五个:static ,relative,absolute,fixed,或sticky. 下面博主将一一进行含代码和运行结果的对比解释 首先是不设置position属性,可以看到two元素的top的属性并未生效,而颜色属性是有效的,当前位置是默认文档流中的位置,以此为原型对比p…

在animation中最重要的其实就是时间函数(animation-timing-function)这个属性,他决定了你的动画将以什么样的速度执行,所以最关键的属性值也就是cubic-bezier(n,n,n,n),你平时用到的linear.ease.ease-out等都是基于这个属性值的,那么我们接下来就看看这个东西到底是什么含义. 这个时间函数是通过一个坐标反映出来的: 这个就是timing-function的工作图,总共有4个点来描述整个曲线的运动形状,其中P0和P3是开始和截止的位置,关…

本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 position,也就表示使用 static. relative 没有脱离布局流,此时可以使用 top.right.bottom.left 属性. top 和 bottom 共存时,使用 top 值,忽略 bott…

网上有很多关于position的讲解,也有很多他们属性之间的比较,但是比较全面的讲解还是比较少,每次看完过段时间就忘了,所以今天参考了很多网上现有的资源,自己整理一下,写下这篇文章. position基本的值有五个:static.fixed.relative.absolute.inherit static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定position,也就表示使用static. relative 没有脱离文档流,此时可以使用top.bottom.l…

转自:http://blog.csdn.net/topviewers/article/details/21644305 讲解不错,转载备忘. position的四个属性值: 1.relative2.absolute3.fixed4.static下面分别讲述这四个属性.<div id="parent">     <div id="sub1">sub1</id>     <div id="sub2">s…

深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute.最后将会介绍和position属性密切相关的z-index属性. 第一部分:position: static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到t…

转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.absolute.fixed. Static 所有元素在默认的情况下position属性均为static,而我们在布局上经常会用到的相对定位和绝对定位常用的属性top.bottom.left.right.在position为static的情况下无效.其用法为:在改变了元素的position属性后可以将…

深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute,sticky.最后将会介绍和position属性密切相关的z-index属性. 第一部分:po…

Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所了解.在此总结一下: 先看下各个属性值的定义: 1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声…

今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什么特点? 第一个问题:position作为一个属性,它一共有哪几个属性值? 对于position属性,他一共有5个值,分别是 static:默认值.没有定位,元素出现在正常的流中. relative:生成相对定位的元素,相对于其正常位置进行定位.正常位置也就是指如果没有position属性它会出现的…

最近调DIV的位置比较头疼,各种position: relative / absolute google到一篇好文章[http://www.webdevdoor.com/html-css/css-position-child-div-parent/] 如何让子div的位置相对父div的位置固定,而父div的位置可以变动. 重点是:父div一定要有position属性(不管relative还是absolute),子div就可以设置position:absolute,这时子div的位置是相对父div…

]把元素的position属性设定为relative.absolute或fixed后,继而可以使用TRBL属性,相对于另一个元素移动该元素的位置.这里的“另一个元素”,就是该元素的定位上下文. 绝对定位元素的默认上下文是body.然而绝对定位元素的任何祖先元素都可以成为它的定位上下文,只要把相应的祖先元素的position设定为relative即可. <body> <div id="outer"> <div id="inner">…

最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative  http://www.blueidea.com/tech/web/2006/4249.asp很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地…

每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以后多看看. Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认 依据父级的做标原始点为原始点.如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位, 位置将由TRBL决定.…

连接:https://www.cnblogs.com/duyanli/p/3534005.html 每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以后多看看. Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点.如果设定TRBL并且父级没有设定posi…

relative:是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px.如果它之前的元素也为relative并有偏移,则两个偏移不想加,relative只在它原本所在位置上进行偏移.relative 不脱离文档流,也就是说relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变,所以不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移位置. a…

也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | relative | absolute | fixed | inherit static 和 inherit : 没什么值得介绍的. relative : 相对于元素自身的定位. absolute :相对于包含块的定位. fixed : 相对于窗口的定位. 2.包含块 包含块就是 top | righ…

在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. relative:生成相对定位的元素,相对于其…

Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在英语中 position 是指位置,方位; 在Html语言中position 是指(定位元素) ------------------position有四个取值属性:position : static | absolute | fixed | relative --------------------…

几种Position常见的属性就是一下几种: 1.static:默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位.可通过z-index进行层次分级. 3.absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left", "t…

本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative(相对)以及absolute(绝对). 如何学习DIV+CSS布局之position属性 如果用position属性来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute.定位(position)布局页面说容易非常容易,只需要记住这节课…

在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. static 默认值,元素出现在正常的流中,忽略 (TRBL)和z-index的值.请参照下面的例子,div1由于position的值为static,所以top,left 没有起作用. <!Doctype html> <meta charset="utf-8"> &l…

之前css学的一直不精致而且没有细节,为了成为一个完美的前端工作人员,所以决定重新学习css的属性.当然会借鉴MDZ文档(MDZ文档)或其他博主的经验来总结.在这里会注明借鉴或引用文章的出处.侵权即删. position属性值包括 static,relative,absolute,fixed,sticky(实验属性)5种. 1.static 该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置.此时设置 top, right, bottom, left 和 z-index 属性…

一.包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块. 1.包含块介绍 包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那个大盒子.元素有positon属性就必然涉及到包含块.先简单总结一下. 1.初始包含块(Initial containing block),即根元素的包含框. 在浏览器中是原点与 canvas 原点重合.大小与 viewport 相同的矩形. 2.position:static|relative 元素包含块为…

一.前言 1.HTML中的三种布局方式: 标准流(普通流):网页中默认的布局方式,即顺序布局 浮动:float 定位:position 2.position属性的作用方式: 给position属性设置相应的值,可使元素脱离正常的标准流,并且可以使用top.right.left.bottom属性对元素进行定位,还可以使用z-index属性对元素的层叠顺序进行更改 position的五个属性值:static.relative.absolute.fixed.inherit 为方便,top.right.…