#box1{边距：20px;宽度：200px；高度：200px；背景色：黄色；}#box2{边距：20px；宽度：200px；：红色的;/*位置：相对；左：100px；top:100px;*/}1。文档流只是根据元素在HTML中的位置来确定元素排列的过程。HTML的布局机制采用文档流模型，即块元素（block）占一行，内联元素（inline）不占一行。一般使用margin来分隔元素与元素；填充用于将元素与内容分开。Margin用于布局和分隔元素，使元素之间不相关；填充用于元素和内容之间的空间，以便内容（文本）和（包装）元素之间存在“距离”。只要布局不是浮动或绝对定位，它就在文档流中。2、position属性引入static，默认值。位置设置为静态的元素将始终位于文档流给定的位置。Inherit指定position属性的值应该从父元素继承。但是任何版本的InternetExplorer（包括IE8）都不支持属性值“inherit”。fixed，生成绝对定位的元素。默认情况下，可定位对象位于相对于浏览器窗口的指定坐标处。元素的位置由“left”、“top”、“right”和“bottom”属性指定。无论窗口是否滚动，元素都将停留在该位置。但是当祖先元素有一个transform属性并且不是None时，坐标是相对于祖先元素而不是浏览器窗口指定的。Absolute，生成绝对定位的元素，是相对于该元素最近定位的祖先元素定位的。该元素的位置可以由“left”、“top”、“right”和“bottom”属性指定。Relative，生成一个相对定位的元素，相对于元素在文档中的初始位置定位。使用“left”、“top”、“right”和“bottom”属性来设置该元素相对于其自身位置的偏移量。3.相对定位relative生成??相对定位的元素，相对于其正常位置进行定位。相对定位的过程是这样的：以默认方式（静态）生成一个元素（并且元素像层一样浮动）。相对于之前的位置移动，移动的方向和幅度由left、right、top、bottom属性决定，偏移前的位置不变。#box1{边距：20px;宽度：200px；高度：200px；背景色：黄色；}#box2{边距：20px；宽度：200px；：红色的;/*位置：相对；左：100px；top:100px;*/}
