关于定位与浮动的一些小知识点（方向、位置）

在学习css的过程中，新手（比如我）容易弄乱的一些概念和样式使用方式。

代码片段1：

.main {
			min-height:650px;
			background-color:pink;
			position:relative; /*定位父级必须设置定位属性*/
			margin:0 200px;	/*设置中间内容块外间距将左右两个块遮挡部分挤出来*/
		}

这段代码中指定了该块级元素“position:relative;”，并且在网页中水平居中。

小tips:

        这个元素是我充当容器的一个块元素，容器中的部分元素需要使用绝对定位属性，那么必须给这个容器加“position:relative;”，否则会让容器中需要使用绝对定位属性的元素以body的x,y轴起点为定位依据而不是以我需要的以容器的x,y轴起点为定位依据。

————

代码片段2：

.left {
			width:200px;
			min-height:650px;
			background-color:skyblue;
			float:left;
			margin-left:-100%;	/*这里和双飞翼布局设置一样*/
			/*相对定位移动元素到正确位置*/
			position:relative;	/*相对于浮动元素文档流*/
			right:200px;	/*向左移动200px*/
		}
		.right {
			width:200px;
			min-height:650px;
			background-color:lightgreen;
			float:left;
			margin-left:-200px;	/*这里和双飞翼布局设置一样*/
			/*相对定位移动元素到正确位置*/
			position:relative;	/*相对于浮动元素文档流*/
			left:200px;	/*向右移动200px*/
		}

这段代码中将两个已浮动的块级元素用相对定位的方式移动到我所需要的位置。

小tips：

       这两个块元素已经脱离了文档流，但这里又使用“position:relative;”来操作元素，是不是有问题呢？这是没有问题的，因为浮动元素不止一个，已经形成了自己的文档流，这里只是相对于浮动元素所组成的文档流。

       另外，后面的位置移动“right:200px;”和“left:200px;”也要注意方向问题。