CSS 定位

简介

在 CSS 中,最基本的布局任务,一般是通过浮动和定位来完成。在对 选择器结构和层叠值和单位字体文本属性基本视觉格式化内外边距、边框颜色和背景 ,这一些点有所了解之后,我们会遇到对页面的结构进行调整的需求,比如列式布局,布局的一部分与另一部分重叠这样的要求。本文接下来就要介绍这些基本的工具。

定位

定位的原理很简单,利用定位,可以准确地定义元素框 相对于正常位置 应该出现在哪里,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

基本概念

定位的类型

通过使用 position 属性,可以选择 4 种不同类型的定位,这会影响元素框生成的方式:

  1. static :元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
  2. relative :元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
  3. absolute :元素框从文档流完全删除,并相对于其 包含块 定位,包含块可能是文档中的另外一个元素,或者是初始包含块。元素原来在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个 块级框 ,而不论原来它在正常流中生成的是什么类型的框。
  4. fixed :元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身(浏览器窗口)。

包含块

CSS2.1 对定位元素的包含块,定义了以下的行为:

  1. “根元素”的包含块,由用户代理建立,在 HTML 中,根元素就是 html 元素。
  2. 对于一个非根元素,如果其 position 值是 relative 或 static,包含块则由最近的块级框、表单元格或行内块祖先框的内容边界构成。
  3. 对于一个非根元素,如果其 position 值是 absolute,包含块设置为最近的 position 值不是 static 的祖先元素,这个过程如下:
    1. 如果这个祖先是块级元素,包含块则设置为该元素的内边距边界;也就是由边框界定的区域。
    2. 如果这个祖先是行内元素,包含块则设置为该祖先元素的内容边界。在从左向右读的语言中,包含块的上边界和左边界是该祖先元素中 *第一个框 内容区的上边界和左边界,包含块的下边界和右边界是 最后一个框 内容区的下边界和右边界。
    3. 如果没有祖先,元素的包含块定义为初始包含块。

偏移属性

也就是常见的 toprightbottomleft 。(这里说一下,css 中“上下左右”的顺序,一般都是 “上右下左”,顺时针这么一个圈。)

这些属性,描述的是 距离包含块最近边的偏移 。例如, top 描述了定位元素上外边距边界距离其包含块的顶端有多远。top 为正值,会把定位元素的上外边距下移,若为负值,则会把定位元素的上外边距移到其包含块的顶端之上。

宽度和高度

设置宽度和高度

对于定位元素,如果使用 toprightbottomleft 来描述4个边的放置位置,那么它的高度和宽度将由这些偏移隐含确定。

See the Pen position-example-1 by twohappy ( @twohappy ) on CodePen .

限制宽度和高度

如果有必要,可以通过 min-widthmin-heightmax-widthmax-height 来限制元素的尺寸。

绝对定位

包含块和绝对定位元素

元素绝对定位时,其包含块是最近的 position 值不为 static 的祖先元素。通常可以人为指定一个元素作为这个包含块,将其 position 指定为 relative,且没有偏移值。

div.contain {position: relative;}
 

简单的例子:

See the Pen position-absolute-eg.2 by twohappy ( @twohappy ) on CodePen .

有一点:元素绝对定位时,还会为其后代元素建立一个包含块,绝对定位的元素 E,它的子元素 C 如果也是绝对定位的,C 的偏移量是相对于 E 的。

绝对定位元素的放置和大小

“放置” 和 “大小” 在绝对定位元素身上,是紧密联系着的两个概念。如前文提到的,对于定位元素,如果使用 toprightbottomleft 来描述4个边的放置位置,那么它的高度和宽度将由这些偏移隐含确定。

但是如果这样之后,再设置一个显式的高度和宽度,会怎么样呢?会有冲突,必须将某些冲突的值忽略掉。

自动边偏移

元素绝对定位时,如果除 bottom 外,某个任意偏移属性设置为 auto,会有一种特殊行为。

See the Pen absolute-position eg.2 by twohappy ( @twohappy ) on CodePen .

绝对定位元素没有对任何方向上的偏移值进行约束时,会出现在它的“静态位置”,就是 position 是 static 时,出现的位置。

非替换元素的放置和大小

See the Pen 过度受限下的绝对定位元素 by twohappy ( @twohappy ) on CodePen .

这里提出一个词叫做“过度受限”,比如一个很大的包含块的绝对定位子元素,左右偏移都限制为10px,左右外边距也都限制为10px,本身宽度也设置为10px,这时 right ,右偏移会失效,并重置成 auto。

如果某一个横向的外边距被设置成 auto,那么只要剩下的限制条件可以满足公式,就都会生效。具体请看例子。

垂直方向的行为,基本和水平方向上一致,只不过忽略的属性从 right,变成了 bottom。

替换元素的放置和大小

替换元素有固有的高度和宽度,所以较容易确定,再这里不多赘述。

固定定位

固定定位除了包含块为视窗之外,其它行为和绝对定位很类似:

1. 过度受限时,忽略 right 、 bottom 。

2. 偏移量未设置时,出现在它的静态位置。

这里有一个点:针对一个特定的需求,相对于父元素的固定定位。如果有一个可以滚动的内容区域,需要相对于这个区域,显示一个固定的小块内容,不随内容滚动而滚动,可以这样写:

See the Pen 相对父元素fixed定位 by twohappy ( @twohappy ) on CodePen .

相对定位

这个也很好理解,因为元素不会从文档流中删除,原来的位置仍然保留,只是将内容偏移一定的距离。

我来评几句
登录后评论

已发表评论数()