常规流之相对定位(Relative positioning)

  相对于后面会讲到的绝对定位,相对定位确实要简单的多。但是简单不代表不重要,今天就来说说它。

一、什么是相对定位

  一旦一个框按照常规流或者是浮动得到定位,它可以相对该位置进行偏移。这就叫做相对定位。这就是标准中对于相对定位的解释。

二、相对定位元素的一些特性

  relative和absolute有一点很像,都能根据top、right、bottom和left属性进行偏移,但是这个偏移有所不同。absolute元素的偏移是相对于它的包含块来的,absolute的包含块在包含块那一章已经说过了,这里就不再说了。而relative元素的偏移,是相对于它自身在常规流中的位置来偏移的。

  这里要注意的一点,relative元素的偏移是相对于它自身在常规流中的位置来偏移的,但是它在常规流中还是占据原来的位置,保留它在常规流中的尺寸。所以它的偏移是不会影响到后续的框的。比如一个relative的B1框,后续有一个也在常规流中B2框,B1偏移后,B2并不会重新定位,B1的偏移对B2不产生任何影响。

  如果相对定位引起overflow:auto 或 overflow:scroll 框的溢出,浏览器必须允许用户能访问内容,也就是这个时候需要创建需要的滚动条,这可能会影响布局。

三、偏移的值

  对于一个相对定位的元素,’left’ 和 ‘right’ 会水平的位移框而不会改变它的大小。’left’会将框向右移动,’right’会将框向左移动。由于 ‘left’ 或者 ‘right’ 不会造成框被拆分或者拉伸,所以,计算后的值总是:left = -right。具体有如下的一些规则。

  1.如果 left 和 right 的值都是 ‘auto’ (它们的初始值),计算后的值为 0。

<div style=" position:relative; left:auto; right:auto; width:200px; height:200px; border:2px solid #000;"></div>

    

  2.如果 left 为 ‘auto’,计算后的值为 right 的负值。如果 right 被指定为 ‘auto’,其计算后的值为 left 值的负值。

<div style=" position:relative; left:100px; right:auto; width:200px; height:200px; border:2px solid #000;"></div>

   

  3.如果 left 和 right 都不是 auto,那么其中一个不得不被舍弃。如果包含块的 direction 属性是 ‘ltr’,那么 left 将获胜,right 值变成 "-left"。如果包含块的 direction 属性是 ‘rtl’,那么 right 获胜,left 值将被忽略。注意是包含块。

    <div style="width:100px; height:100px; overflow:auto; border:1px solid blue; direction:ltr; ">
        ltr
        <div style="width:20px; height:20px; background-color:red; position:relative; left:60px; right:30px;"></div>
    </div>

    <div style="width:100px; height:100px; overflow:auto; border:1px solid blue; direction:rtl; ">
        rtl
        <div style="width:20px; height:20px; background-color:red; position:relative; left:60px; right:30px;"></div>
    </div>

  

  4.top 和 bottom 属性将相对定位元素向上或者向下移动,而不改变其大小。top 把框向下移动,而 bottom 将其向上移动。由于 top 和 bottom 没有造成框被拆分或者拉伸,计算值总是 top=-bottom,如果两个都是auto,其计算值就都是0,如果其中之一是auto,它就是另一个的负值。如果都不是auto,bottom被忽 略(bottom的计算值会是top值的负值)。和left、bottom有点像,就不一一举例了。

四、relative与层级的关系

  设置了relative的属性是可以通过设置它的z-index属性来提升它的层级的。假设一个margin负值存在的情况下,后框会和前框发生重叠,如果两个框z-index值相同(或都没有),谁在后面谁就在上面显示。当然IE6下的z-index的蛋疼问题也是存在的,大家应该都比较熟悉了,也就不多讲了。

  其实这一章写的很仓促了,只是占个位,本来说好好写,结果参加了个婚礼回来突然整个人就感觉不好了,可能酒桌上的鲍鱼被我抢太多了(笑)。头疼的不行,先放着,后面再来完善吧。

时间: 2024-11-03 03:32:13

常规流之相对定位(Relative positioning)的相关文章

常规流( Normal flow )

格式化上下文( Formatting context ) 格式化上下文指的是初始化元素定义的环境.包含两个要点,一个是元素定义的环境,一个是初始化. 在 CSS 中,元素定义的环境有两种,一种是块格式化上下文( Block formatting context ),另一种是行内格式化上下文( Inline formatting context ). 这两种上下文定义了在 CSS 中元素所处的环境,格式化则表明了在这个环境中,元素处于此环境中应当被初始化,即元素在此环境中应当如何布局等. 以上解释

文档流(常规流)

流顺序: 元素按照 HTML 中顺序,自上而下,自左至右,在窗体中排放 CSS2.1 中 position 定位的方案: 常规流: 块级元素.行内元素.相对定位 浮动 绝对定位: absolute.fix 属性 position 值 static —— 默认值,元素不被特殊定位 relative —— 配合 top.right.bottom.left 偏离正常位置, 且其他元素不会因此而调整位置来弥补空白 fixed —— 相对视窗定位,即使页面滚动依然不变(移动浏览器支持较差) absolut

常规流之块级格式化上下文(Block Formating Context)

在css2.1中,常规流包括块框(block boxes)的块格式化(block formatting),行内框(inline boxes)的行内格式化(inline formatting),块级框(block-level-boxes)或行内级框(inline-level-boxes)的相对定位.常规流中的框属于一个格式化上下文,可能是块或者是行内,但不能同时都是.块级框参与块级格式化上下文,行内级框参与行内级格式化上下文.今天我们先来说说块级格式化上下文,也就是我们常说的BFC. 一.形成块级

相对定位relative

今天看了慕课网课程CSS深入理解之relative,进行总结 首先相对定位relative对absolute有限制 1.限制absolute的定位 使用relative定位的元素使其absolute子元素,相对于此relative元素定位 2.限制层级 使用relative定位的元素的z-index层级越高,则其absolute子元素层级越高 <div relative z-index=3 > <div absolute z-index=1 id=z1></div>  

三种可视化格式模型:普通文档流、相对定位与绝对定位、浮动

在CSS中是有三种定位机制的:普通文档流.浮动和绝对定位.在未指定其它两种定位机制的情况下,所有框都是在普通文档流中定位的. 普通文档流: 普通文档流,顾名思义,就是根据块级元素的标签在HTML里的顺序,像水流一样,从上至下.当然对于行内元素而言,还是在一行中水平排列的. 这里插入一个积累的小知识点. 行内元素可 以在水平(内间距.边框.外边距)方向上修改它们水平尺寸,但是在垂直方向上对行内元素的高度是毫无影响的,还有就是直接定义行内元素的 width/height也是毫无影响.对与行内元素来说

常规流之行内级格式化上下文(Inline Formatting Contexts)

本节我们来讨论一下Inline formatting contexts(行内格式化上下文,以下简称IFC)和line box(行框). 一.行框 在一个行内格式化上下文中,框会一个接一个的水平放置,从包含块的顶部开始.这些框水平方向的margin.border以及padding属性是会起作用的.这些框在垂直方向上的对齐方式可以不一样:可以顶部或底部对齐,或根据其中文字的基线对齐.包含这些框的矩形区域,会形成一行叫做行框(line box)的东西. 一个行框的宽度由它的包含块和和其中的浮动元素来决

盒子常规流和浮动基础

块盒在常规流下的位置 盒子在包含块的垂直方向上摆放 依次摆放:按照HTML元素的书写顺序从上到下摆放 盒子在包含块中占据的尺寸是整个盒子的尺寸 垂直方向上若两个外边相邻,则进行合并(折叠) 垂直方向:水平方向上外边距不会合并 外边距相距:两个外边距之间没有border.padding和content 合并:均正取大,均负取小,一正一负相加 盒模型中的auto值-水平方向 常规流盒子水平方向上的尺寸,必须等于包含块的宽度 垂直方向 margin为auto:0px height为auto:适应内容的

层叠和继承的概念,选择器的优先级,盒模型,元素在页面上的定位体系,常规流

1.层叠和继承的概念: CSS层叠性是指CSS样式在针对同一元素配置同一属性是,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠. 继承:子元素会自动拥有父元素的某些CSS属性,通常来说,文本类的属性会被继承(字体.字号.颜色) 2.选择器的优先级 !important>id选择器>类选择器>标签选择器>子选择器>后代选择器>伪类选择器 3.盒模型 在网页中,一个盒子占有空间的大小由几个部分构成

常规流和脱离文档流

常规流 又叫做文档流:在没有CSS的干预下,块级元素独占一行,宽高可设:行内元素并排显示,宽高自动. 脱离文档流 又叫做浮动流:元素在进行浮动后就是脱离文档流: 注意:浮动流在进行摆放的时候要避开常规流: 常规流在进行摆放时无视浮动流: 子级元素浮动后导致父级高度坍塌: 清除浮动 书写格式:fixed:after { content: " "; display: block; clear: both;} 属性 值 说明 clear none 默认   left 清除左浮动,元素在左浮动