定位概述

定位概述

1. 可视化格式模型

块级元素:p、h1、或div

行内元素:strong、span

1.可以使用display属性改变生成的框的类型。

display:block;   //则将行内元素表现的像块级元素。

2.块级框从上往下一个一个的垂直排列，框之间的垂直距离由框的垂直外边距计算出来。 行内框在一行中水平排列。可以使用水平内边距、边框和外边距调整它们的水平距离。但是 ，垂直内边距、边框和外边距不影响行内框的高度。

padding-left:8px; //可加长行内元素左右之间的距离
padding-top:10px;  //不可以撑高行内元素，即高度不变

这时可以使用 1 中所写的display属性，display:block,使padding-top起作用。如果想块级元素像行内元素水平排列，则可以使用display:inline-block。

2.相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

3.绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 普通流中其它元素的布局就像绝对定位的元素不存在时一样

注意：绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素确定的。如果元素没有已定位的祖先元素，那么它的位置是相对于初始包含块的。根据用户代理的不同，初始包含块可能是画布或HTML元素。

#brand{
	background-color: green;
	width: 70px;
	height: 10px;
	position:relative;
}
.tel{
	right: 1px;
	bottom: 1px;
	text-align: right;
	position: absolute;
}

<div id="branding">
      <p class="tel">123456</P>
</div>

这个代码让一个文本段落对准一个大框的右下角，只需对包含框进行相对定位，然后相对于这个框对段落进行绝对定位。

4.固定定位

固定定位是绝对定位的一种。差异在于固定元素的包含块是视口（viewport）。这使我们能够创建总是出现在窗口中相同位置的浮动元素。