css三种基本定位机制

CSS是前端开发中重要的一环。其中，定位机制是CSS优化排版布局的必备技巧。在CSS中，有三种基本定位机制：普通流（normal flow）、浮动（float）、定位（position）。

普通流是元素默认的排版方式。在普通流中，元素按照其在HTML文档中的位置自上而下依次排列。它主要应用于静态文本的排版布局。同时在普通流中还有相对定位（relative positioning）和绝对定位（absolute positioning），可以通过设置top、bottom、left、right属性，使元素在普通流中产生偏移。

p {
  position: relative;
  top: 50px;
  left: 20px;
} 

浮动是指将元素从普通流中取出并左右偏移。该元素会脱离文档流，但仍然会占据原来在普通流中的位置。浮动元素可以向左、向右、或在两侧同时浮动。常用于图文混排和多列布局。

img {
  float: left;
  margin-right:10px;
} 

定位机制是指基于元素当前在标准流中的位置以及top、bottom、left和right属性的值，使元素脱离文档流并定位到页面中的指定位置。常用于动态交互效果的实现和遮罩层的布局。

#tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

以上是三种基本的定位机制，它们在不同的场景下都有各自的应用。在实际应用中，需要灵活运用各种定位机制，才能高效地完成页面布局。