谈到CSS的定位机制时都会提到一个关键词“文档流”。那么什么是文档流呢?将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为
文档流。
CSS的定位机制有3种:
普通流、浮动(float:left/right/none)和定位 (position:static/relative/absolute/)。
普通流中的元素的位置由元素在 (X)HTML 中的位置决定。浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。 详见:
http://www.w3school.com.cn/css/css_positioning.asp
基于文档流, 我们可以很容易理解以下的定位模式:
相对定位relative:相对于元素在文档流中位置进行偏移. 但保留原占位。相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
绝对定位absolute:完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移。
固定定位static:完全脱离文档流, 相对于视区进行偏移。
绝对定位fixed:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
position的absolute与fixed共同点与不同点:
A:共同点:
1.改变行内元素的呈现方式,display被置为block;2.让元素脱离普通流,不占据空间;3.默认会覆盖到非定位元素上
B不同点:
absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。
分享到:
相关推荐
基于文档流解读html元素的(css)定位形式 每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。 内联元素也不会独有一行. 简直一切元素(包括块级,内联和列表元素)均...
绝对定位使元素的位置与文档流无关,因此不占据空间。生成绝对定位的元素,相对于 static 定位以外的第一个父元素(body)进行定位。 * fixed:固定定位。生成固定定位的元素,相对于浏览器窗口进行定位。 #### ...
属性:position 作用:检索或者设置元素的定位方式(改变元素位置的属性) *定位分为静态定位,绝对定位,相对定位,固定定位,粘性定位* (1)static 静态定位: ... c : 绝对定位,脱离文档流、不占据空间
如果说相对定位没有脱离文档流,相对于对象本身进行偏移有点拖泥带水的话,那么绝对定位绝对是快刀斩乱麻,因为绝对定位可以使一个对象脱离正常的文档流,好像是漂浮在正常文档流的上空,并相对于包含此对象的元素...
relative 不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。absolute 脱离文档流,通过 top,bottom,left,right 定位。选取其最近的父级定位元素,当父级 position...
CSS 定位属性允许我们操作自然的文档流,在页面上排列方框,以达到美观且用户友好的设计。在实际创建 CSS 布局之前,这是需要理解的最后一个概念。 不同的定位类型(静态、绝对、相对和固定),以及位置的浮动,涵盖了...
position:static(静态定位) 当position属性定义为static时,...当position属性定义为absolute时,元素会脱离文档流,完全不受文档流的影响,根据某个参照物坐标来定位它的位置.当绝对定位元素没有显示的指明top,rig
在文档流中的位置仍然保留着 /*设置相对定位*/ position: relative; top: 150px; left: 260px; 相对定位 实战:对“相对定位2”设置left: 150px ; top: 50px; top:50px left:150px 定位前 定位后 总结 02 熟知元素的...
在静态定位状态下,元素将被定位于HTML文档流中默认的位置。这种定位方式是元素的默认定位方式,不需要添加任何CSS代码便可以实现。 二、静态定位的特点 静态定位有以下几个特点: 1. 元素默认定位:在HTML文档流...
流(Flow):在CSS中,元素可以处于不同的布局流中,如普通流、浮动流或定位流。 浮动(Float):使元素向左或向右移动,其他内容则围绕它。常用于文本环绕图像。 定位(Position):允许你精确地控制元素在页面上的...
绝对定位使元素的位置与文档流无关,因此不占据空间。绝对定位的元素框与文档流无关,所以它们可以覆盖页面上的其它元素。 绝对定位的语法格式为: position: absolute; top: 260px; left: 260px; 在上面的代码...
遵守正常的文档流,不设置top,bottom,left,right值。 fixed 脱离正常的文档流,完全以浏览器窗口为参照物,不随鼠标的滚动而滚动。设定tblr值。 relative 相对于什么呢?是相对于该元素原本在文档流中的位置进行...
在文档流中的位置没被保存 /*设置绝对定位*/ position: fixed; right: 0px; bottom: 0px; 总结 02 熟知元素的固定定位以浏览器窗口作为参照物来定义网页元素。 熟知掌握固定定位的语法格式能熟练运用 总结 THANKS
3.5.2 标准文档流 3.5.3 div 标记与 span 标记 3.6 盒子在标准流中的定位原则 3.6.1 实验1——行内元素之间的水平margin 3.6.2 实验 2——块级元素之间的竖直margin 3.6.3 实验3——...
css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin值计算得到,...
--*-- 1 单元目标 2 教学内容 3 动手实践 4 ... 因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高,它显示的越在上层。 教学内容 z-index : numbe
定位模式用于指定一个元素在文档中的定位方式,而边偏移则决定了该元素的最终位置。边偏移有四个属性:top、bottom、left 和 right,它们分别定义元素相对于其父元素的上边线、下边线、左边线和右边线的距离。 定位...
3.5 盒子之间的关系 3.5.1 HTML与DOM 3.5.2 标准文档流 3.5.3 div 标记与 span 标记 3.6 盒子在标准流中的定位原则 3.6.1 实验1——行内元素之间的水平margin 3.6.2 实验2——块级元素之间的竖直margin...
css定位功能探索 </title> <style type=”text/css”> #relative{ /*相对定位探索 将相对于它在普通流中位置进行定位 相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中...