CSS定位与布局

CSS布 局之定位布局 定位布局(Position)指元素可以脱离原来的位置,定位到页面中的任意位置。

使用 position、left、right、top、bottom，可以改变元素现有位置，譬如让元素从正常布局流中跳出来，固定在页面某个位置上。

css中的定位布局，分为静态，相对，绝对，固定，粘滞布局

HTML元素默认的定位是静态，默认定位在文档流中，设置position: static;样式的元素不会受到left，right，bottom，top的影响。它不会因为任何特殊的定位方法而改变其在正常流中的位置

相对定位是元素相对于其在原来标准流中位置进行移动，通过left，right，bottom，top属性进行调整

注意点：

• 设置了相对定位的元素是不脱离文档流的，也就是说他是区分行内元素/块级元素/行内块元素

• 因为他不脱离文档流，那我们就可以他添加magin和padding

• 在同一方向上只能设置一个属性，即left，right选择一个属性设置，设置了top就不能设置bottom

使用场景：

• 结合绝对定位使用

• 对元素进行微调

绝对定位的参考点

• 默认情况下，无论有位祖先元素，都是以body作为参考点。

• 但是，当祖先元素中有定位流元素(使用了绝对/相对/固定定位)，那么该元素就是参考点

• 如果其祖先元素中含有多个定位流元素，则选择最近的定位流元素作为参考点

注意点

• 绝对定位的元素是脱离文档流的

• 因为他脱离文档流，那么他就不区分分行内元素/块级元素/行内块元素

• 绝对定位的元素是会忽略其祖先元素的padding

设置了固定定位的元素是相对于视口定位的，也就是说其不会随着滚动条的滚动而滚动，他始终处于以一个视口的位置，通过left，right，bottom，top属性调整其位置

注意点

• 固定定位的元素是脱离文档流的

• 和绝对定位一样，不区分区分行内元素/块级元素/行内块元素