CSS 定位与浮动

定位

1. 静态定位（static）

.box {
  position: static;
}

默认定位方式，元素按照正常的文档流排列。

2. 相对定位（relative）

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

相对于元素原始位置进行偏移，不脱离文档流。

.box {
  position: relative;
  top: 10px;       /* 向下移动10px */
  right: 20px;     /* 向左移动20px */
  bottom: 30px;    /* 向上移动30px */
  left: 40px;      /* 向右移动40px */
}

3. 绝对定位（absolute）

.box {
  position: absolute;
  top: 10px;
  left: 20px;
}

相对于最近的已定位祖先元素进行定位，脱离文档流。

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 10px;
  left: 20px;
  right: 30px;
  bottom: 40px;
}

4. 固定定位（fixed）

.box {
  position: fixed;
  top: 0;
  right: 0;
}

相对于浏览器窗口进行定位，脱离文档流。

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

5. 粘性定位（sticky）

.box {
  position: sticky;
  top: 10px;
}

基于滚动位置在相对定位和固定定位之间切换。

.header {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 100;
}

.sidebar {
  position: sticky;
  top: 20px;
}

层叠上下文（z-index）

z-index 属性

.box1 {
  position: relative;
  z-index: 1;
}

.box2 {
  position: relative;
  z-index: 2;
}

z-index值越大，元素越靠上。

创建层叠上下文

/* 1. position + z-index */
.box {
  position: relative;
  z-index: 1;
}

/* 2. position: fixed/sticky */
.box {
  position: fixed;
}

/* 3. opacity < 1 */
.box {
  opacity: 0.9;
}

/* 4. transform */
.box {
  transform: translateZ(0);
}

/* 5. filter */
.box {
  filter: blur(1px);
}

/* 6. isolation: isolate */
.box {
  isolation: isolate;
}

浮动

浮动属性

.box {
  float: left;
}

.box {
  float: right;
}

.box {
  float: none;
}

浮动应用

/* 文字环绕图片 */
img {
  float: left;
  margin-right: 10px;
}

/* 多列布局 */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

清除浮动

/* 方法1: 使用clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 方法2: 使用overflow */
.container {
  overflow: hidden;
}

/* 方法3: 使用伪元素 */
.container::after {
  content: "";
  display: block;
  clear: both;
}

/* 方法4: 使用clear属性 */
.clear {
  clear: both;
}

定位与浮动对比

定位

.box {
  position: absolute;
  top: 10px;
  left: 20px;
}

• 脱离文档流
• 可以精确控制位置
• 支持z-index

浮动

.box {
  float: left;
}

• 脱离文档流（部分）
• 文字环绕效果
• 需要清除浮动

实际应用

1. 居中元素

/* 水平居中 */
.box {
  margin: 0 auto;
}

/* 水平垂直居中（绝对定位） */
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 水平垂直居中（固定定位） */
.box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. 固定头部

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.main-content {
  margin-top: 60px;
}

3. 粘性侧边栏

.container {
  display: flex;
}

.main {
  flex: 1;
}

.sidebar {
  width: 300px;
  position: sticky;
  top: 20px;
  height: fit-content;
}

4. 图片文字环绕

.image {
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
}

.text {
  text-align: justify;
}

5. 多列布局

.container::after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
}

面试常见问题

1. CSS 定位有哪些类型？

• static: 静态定位（默认）
• relative: 相对定位
• absolute: 绝对定位
• fixed: 固定定位
• sticky: 粘性定位

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

2. 相对定位和绝对定位的区别？

• 相对定位: 相对于元素原始位置偏移，不脱离文档流
• 绝对定位: 相对于最近的已定位祖先元素定位，脱离文档流

/* 相对定位 */
.box {
  position: relative;
  top: 10px;
}

/* 绝对定位 */
.box {
  position: absolute;
  top: 10px;
}

3. 如何清除浮动？

/* 方法1: 使用clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 方法2: 使用overflow */
.container {
  overflow: hidden;
}

4. z-index 的作用是什么？

z-index用于控制元素的层叠顺序，值越大，元素越靠上。只有定位元素（position非static）才能使用z-index。

.box1 {
  position: relative;
  z-index: 1;
}

.box2 {
  position: relative;
  z-index: 2;
}

5. 粘性定位的特点是什么？

粘性定位基于滚动位置在相对定位和固定定位之间切换，当元素到达指定位置时固定，否则按照正常文档流排列。

.box {
  position: sticky;
  top: 10px;
}

通过理解CSS定位和浮动的概念和应用，可以实现各种复杂的布局效果。