CSS中定位的方法

这篇文章主要为大家展示了“CSS中定位的方法”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS中定位的方法”这篇文章吧。

成都创新互联公司长期为近千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为巩留企业提供专业的网站设计制作、成都网站制作，巩留网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

1.文档流

简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。HTML的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素（inline）不独占一行。

一般使用margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“距离”。只要不是float和绝对定位方式布局的，都在文档流里面。

2.position属性介绍

1. static，默认值。位置设置为static的元素，它始终会处于文档流给予的位置。

2. inherit，规定应该从父元素继承 position属性的值。但是任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

3. fixed，生成绝对定位的元素。默认情况下，可定位于相对于浏览器窗口的指定坐标。

4. 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。不论窗口滚动与否，元素都会留在那个位置。但当祖先元素具有transform属性且不为none时，就会相对于祖先元素指定坐标，而不是浏览器窗口。

5. absolute，生成绝对定位的元素，相对于距该元素最近的已定位的祖先元素进行定位。

6. 此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。

7. relative，生成相对定位的元素，相对于该元素在文档中的初始位置进行定位。

8. 通过 “left”、”top”、”right” 以及 “bottom” 属性来设置此元素相对于自身位置的偏移。

3.相对定位

relative生成相对定位的元素，相对于其正常位置进行定位。

相对定位完成的过程如下：

按默认方式（static）生成一个元素(并且元素像层一样浮动了起来)。相对于以前的位置移动，移动的方向和幅度由 left、right、top、bottom 属性确定，偏移前的位置保留不动。

       
        #box1 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #box2 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: red;
            /*position: relative;
            left: 100px;
            top: 100px;*/
        }