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中的重中之重,所以需要特别的重视,定位首先需要理解,并能区分相对定位和绝对定位有什么不同,在理解的角度上我们然后才能慢慢的去应用,最后通过应用去彻底掌握它。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。