Absolute与Relative元素定位的混合使用

父与子模块都是absolute 解说父模块： 父模块，是以网页左上角为基准，向下移动50px，向右移动100px； 模块的宽度根据内容的长度而定； 也不排挤其他模块的空间； 解说子模块： 子模块，是以 父模块 的左上角为基准，向下移动20px，向右移动30px； 模块的宽度根据内容的长度而定； 当鼠标移到 父模块 时， 子模块 会自动消失； 复制代码 javascript 当鼠标移到 父模块 时， 子模块 会自动消失； //选择 父模块 元素 (“.father”).hover(function() { //鼠标移入时 (“.son”).hide(); //隐藏 子模块 元素 }, function() { //鼠标移出时 $(“.son”).show(); //显示 子模块 元素 }); CSS //父模块样式 .father { position: absolute; top: 50px; left: 100px; } //子模块样式 .son { position: absolute; top: 20px; left: 30px; display: none; } 当鼠标移到 父模块 时，子模块 会自动消失； 当鼠标移到 父模块 时，子模块 会自动消失； position:absolute的使用与子元素的相对定位的组合 当父模块是定位以后，子模块的定位也是用 相对定位，则子模块将是相对于 父模块 定位，以 父模块 的左上角为参考定位。 复制代码 position:absolute的使用与子元素的相对定位的组合 当父模块是定位以后，子模块的定位也是用 相对定位，则子模块将是相对于 父模块 定位，以 父模块 的左上角为参考定位。 CSS //父模块样式 .father { position: absolute; top: 50px; left: 100px; } //子模块样式 .son { position: relative; top: 20px; left: 30px; } 当父模块是定位以后，子模块的定位也是用 相对定位，则子模块将是相对于 父模块 定位，以 父模块 的左上角为参考定位。 当父模块是定位以后，子模块的定位也是用 相对定位，则子模块将是相对于 父模块 定位，以 父模块 的左上角为参考定位。 另一个问题是如何保持子元素随着父元素的移动而移动， 有两种解决方案： 复制代码 另一个问题是如何保持子元素随着父元素的移动而移动， 有两种解决方案： 方法一: 将父模块定位，则子模块定位将相对于 父模块 定位 CSS //父模块样式 .father { position: absolute; top: 50px; left: 100px; } //子模块样式 .son { position: relative; } 方法二：父模块与子模块的 left、top 属性值进行计算 CSS //父模块样式 .father { position: absolute; top: 50px; left: 100px; } //子模块样式 .son { position: absolute; top: calc(50px + 20px); left: calc(100px + 30px); } 将父模块定位，则子模块定位将相对于 父模块 定位

    **Absolute与Relative元素定位的混合使用** 

    在网页设计中，有时我们需要将元素定位在特定位置。可以使用absolute和relative定位来实现这一目的。

    **Absolute定位** 

    absolute定位是一种绝对定位方式。使用absolute定位的元素将相对于其父元素定位。这意味着元素将从父元素的左上角开始定位。

    **Relative定位** 

    relative定位是一种相对定位方式。使用relative定位的元素将相对于其当前位置定位。这意味着元素将从其当前位置开始移动。

    **混合定位** 

    可以使用absolute和relative定位来创建混合定位。混合定位允许我们将元素定位相对于其父元素或其当前位置。

    **保持子元素随着父元素的移动而移动** 

    可以使用两种方法来保持子元素随着父元素的移动而移动。

    * **方法一：**  将父元素定位，则子元素定位将相对于父元素定位。
    * **方法二：**  父元素与子元素的left、top属性值进行计算。

    **示例代码** 

    以下示例代码演示了如何使用absolute和relative定位来创建混合定位。

    HTML代码：

    ```html
    <div class="father">
      <div class="son"></div>
    </div>
    ```

    CSS代码：

    ```css
    .father {
      position: absolute;
      top: 50px;
      left: 100px;
    }

    .son {
      position: relative;
      top: 20px;
      left: 30px;
    }
    ```

    **效果** 

    当您将鼠标悬停在`.father`元素上时，`.son`元素将随着`.father`元素的移动而移动。

    **结论** 

    absolute和relative定位是两种非常有用的定位方式。可以通过混合使用absolute和relative定位来创建复杂的布局。