定位的基本思想很简单它允许用户通过属性定义将元素相对于其应该出现的位置进行位移这个属性对于建立元素布局的定位机制起着重要作用。定位方式1.静态定位static静态定位是position属性的默认值盒子按照标准流进行布局即该元素出现在文档的常规位置不会重新定位。2.相对定位absolute使用相对定位的盒子会相对于自身原本的位置通过偏移指定的距离到达新的位置使用相对定位除了要指定一定的的移量。其中水平方向的偏移由 left 和 right属性指定垂直方向的偏移量由top和bottom 属性指定。示例.card { width: 300px; height: 200px; background-color: #ff6b6b; border-radius: 10px; padding: 20px; color: white; font-size: 18px; margin-bottom: 600px; }3. 绝对定位absolute使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素就以浏览器窗口为基准进行定位。“已经定位”是指定义了static 之外的 position。绝对定位的盒子从标准流中脱离对其后的兄弟盒子的定位没有影响其他的盒子就好这个盒子不存在一样。原先在正常文档流中所占的空间会关闭就好像元素原来不存在一样。元素定位后生成一个块级框与原来它在正常流中生成的框无关。示例.tag { width: 80px; height: 30px; background-color: #4dabf7; border-radius: 5px; font-size: 14px; text-align: center; line-height: 30px; position: relative; left: 250px; bottom: 80px; }4. 固定定位固定定位(position: fixed)其实是绝对定位的子类别一个设置了 position:fixed的元素是相对于视窗固定的就算页面文档发生了滚动它也会一直待在相同的地方。示例.back-btn { width: 50px; height: 50px; background-color: #51cf66; border-radius: 50%; text-align: center; line-height: 50px; color: white; font-weight: bold; cursor: pointer; position: fixed; right: 40px; bottom: 40px; }它们的最终效果如下图所示