谈谈CSS中有趣的浮动和定位属性

2023-02-06 08:01:05

CSS 定位和浮动：掌握布局灵活性

在 CSS 中，定位和浮动属性是至关重要的工具，可让您控制元素在网页上的位置，从而创建灵活而富有表现力的布局。

浮动

浮动属性允许元素在文档流中移动到一侧，而不影响其他元素的位置。这使其成为创建多列布局或将元素定位到特定位置的理想选择。

语法：

float: left | right | none;

属性值：

left： 将元素浮动到左侧。
right： 将元素浮动到右侧。
none： 清除浮动，使元素正常流动。

定位

定位属性允许您相对于其父元素或文档视口定位元素。这非常适合创建绝对定位的元素（从文档流中移除）、固定定位的元素（始终保持在视口内的相同位置）或相对定位的元素（相对于其正常位置移动）。

语法：

position: static | relative | absolute | fixed;

属性值：

static： 元素处于其正常文档流位置。
relative： 元素相对于其正常位置移动。
absolute： 元素从文档流中移除，并相对于其最近定位的父元素定位。
fixed： 元素从文档流中移除，并相对于文档视口定位。

示例代码

<!DOCTYPE html>
<html>
<head>
  <style>
    #float-left {
      float: left;
      width: 200px;
      height: 200px;
      background-color: #ccc;
    }

    #float-right {
      float: right;
      width: 200px;
      height: 200px;
      background-color: #ccc;
    }

    #absolute {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 200px;
      height: 200px;
      background-color: #ccc;
    }

    #fixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100px;
      background-color: #ccc;
    }

    #relative {
      position: relative;
      top: 100px;
      left: 100px;
      width: 200px;
      height: 200px;
      background-color: #ccc;
    }

    #child {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: #f00;
    }
  </style>
</head>
<body>
  <div id="float-left">浮动到左边</div>
  <div id="float-right">浮动到右边</div>
  <div id="absolute">绝对定位</div>
  <div id="fixed">固定定位</div>
  <div id="relative">相对定位
    <div id="child">子元素</div>
  </div>
</body>
</html>