CSS学习篇核心之——定位

概述

 

       关于CSS样式的进一步学习，我们今天主要学习下CSS的定位知识，定位就是定义我们的元素框由原来的位置在移动后所处的位置。关于定位有三种相对定位、绝对定位和浮动。

 

相对定位

 

       相对定位相对来说是比较简单的，如果对一个元素进行相对定位，它首先出现在其初始位置，然后可以设置它垂直货水平位置，让这个元素“相对于”它的起点进行移动。

 

       我们对框2进行设置，将 top 设置为20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

 

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

 

 

    需要注意的是，在使用相对定位时，无论怎么进行移动，框2仍然会占据原来的空间，即原来的空间依然会保留着，但是框2会覆盖框3这就是相对定位。

 

 

绝对定位

 

        设置为绝对定位后，元素原先所在的正常的文档流中所占有地空见就会关闭，就像该元素原来不村子一样，然后根据最近的已定位的祖先元素进行移动。

 

    我们还是对框2进行移动，将top 设置为 20px，  left 设置为 30 像素。

 

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

 

 

    当对框2进行设置为绝对定位时，首先框2原来所占的空见就会关闭，框2原来的位置就不村子了，所以框3就占据了框2的位置，接下来设置框2的移动，框2移动相对于祖先元素，这个祖先元素就是保护框1、2、3的这个空白块，框2相对于父元素空白框进行移动，移动完成后就成图所示那样。

 

    关于绝对定位2个重点，一是原来的框2所在空见不存在了，其它元素布局按照普通流的定位重新移动，即框3占据框2原先关闭的位置；第二就是框2移动是相对于祖先元素，如果没有祖先元素，那么它的位置相对于最初的包含块。

 

定位比较

 

        相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块；相对定位原先空见仍然存在，绝对定位原先空间不再存在。

 

 

浮动

      

       浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

 

     当把框 1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘，如图

 

 

 

      

      再看下图，当框 1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2从视图中消失。

 

      如果把所有三个框都向左移动，那么框1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

 

 

       如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

 

总之

       定位属性CSS中的重中之重，所以需要特别的重视，定位首先需要理解，并能区分相对定位和绝对定位有什么不同，在理解的角度上我们然后才能慢慢的去应用，最后通过应用去彻底掌握它。