今天就跟大家聊聊有关“CSS中定位属性是什么，怎么实现多种定位效果”的内容，可能很多人都不太了解，为了让大家认识和更进一步的了解，小编给大家总结了以下内容，希望这篇“CSS中定位属性是什么，怎么实现多种定位效果”文章能对大家有帮助。

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 属性确定，偏移前的位置保留不动。

  <style type="text/css">     
        #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;*/
        }
  </style>
  <div id="box1"></div>
  <div id="box2"></div>

其中box2中的注释代码未生效前，是按照文档流进行排序呈现。

但是，当注释代码取消注释生效后，就会相对文档流中应当呈现的位置进行移动。

所以，相对定位的参照物是它本身。

4.绝对定位

绝对定位与相对定位的一大不同之处就是，当我们把一个元素设置成绝对定位，那么这个元素将会脱离文档流，其他元素就会认为这个元素不存在于文档流中而填充它原来的位置。绝对定位元素根据它的参照物移动自己的位置，而参照物则需要根据它祖先元素的定位设置来确定。

所谓根据它祖先元素的定位设置来确定简单理解为：相对于该元素最近的已定位的祖先元素，如果没有一个祖先元素设置定位，那么参照物是body层。

1. 在祖先元素没定位的情况下，使用absolute。在这种情况下，参考物就是body。
2. 祖先元素有定位，祖先元素只要设置了值不为position:static之外的值，都视为有定位，并且最近的祖先元素会被设置为绝对定位元素的参照物。在这种情况下，参考物就是最近的祖先元素。
3. 在没设置left/right、top/bottom的情况下，absolute元素的位置就是该元素在文档流里的位置

关于“CSS中定位属性是什么，怎么实现多种定位效果”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS的font属性怎样使用，使用要注意哪些？

  我们知道CSS的font属性是字体样式设置的一个属性，我们经常需要对字体样式进行操作，对此这篇就给大家来讲讲font属性的时候，以及使用需要注意的一些事项问题，文中的示例代码有一定的参考价值，有需要的朋友可以了解看看。

• CSS加载会不会阻塞DOM树的解析渲染

  可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？下面就跟随小编一起来了解一下

• CSS三角形效果的实现及在布局的应用是怎样

• HTML中实现细线表格效果的思路及方法是什么

  网页制作也需要使用到表格，但是默认的表格通常没有那么美观，如果我们既想要美观，又想功能强大要怎么操作呢？

• CSS中如何实现鼠标跟随，原理及方法是什么

  CSS鼠标跟随的原理：1、鼠标跟随就是元素会跟随着鼠标的移动，而作出相对应的运动。2、为了能够监控当前鼠标的位置，只需在页面上铺上元素即可。