CSS中的position属性详解

站长

2023年11月28日 15:30 · 阅读数 114

前言：

在CSS中，position属性用于控制元素的定位方式。它有四个可选值：static、relative、absolute和fixed。下面将详细介绍每个属性的作用以及使用场景，并为每个定位属性提供一个HTML实例。

1.static（静态定位）：

特征：元素遵循正常文档流，不受top、bottom、left和right属性的影响，不可设置z-index属性。
使用场景：默认值，适用于大多数元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body style="height: 2000px;">
    <!-- 参照物1 -->
    <div style="height: 100px;width: 100%;border: 5px solid black;">参照物1</div>

    <!-- 静态定位 -->
    <div style="position: static;background-color: pink;">
        这是一个静态定位的元素。
     </div>  
     
     <!-- 参照物2 -->
     <div style="height: 100px;width: 100%;border: 5px solid lawngreen;">参照物2</div>
</body>
</html>

结果： CSS中的position属性详解

这里共设置三个div，静态定位占据文档流，元素根据正常文档流进行布局。

2.relative（相对定位）：

特征：元素相对于其正常位置进行定位，仍然占据原来的空间，通过设置top、bottom、left和right属性来调整元素的位置，可设置z-index属性。
使用场景：常用于微调元素位置或配合绝对定位元素的定位基准。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body style="height: 2000px;">
    <!-- 参照物1 -->
    <div style="height: 100px;width: 100%;border: 5px solid black;">参照物1</div>

    <!-- 相对定位 -->
    <div style="position: relative; top: 20px; left: 100px;background-color: green;">
        这是一个相对定位的元素，向下移动20像素，向右移动100像素。
    </div> 
     
     <!-- 参照物2 -->
     <div style="height: 100px;width: 100%;border: 5px solid lawngreen;">参照物2</div>
</body>
</html>

结果： CSS中的position属性详解相对于其正常位置进行定位，向下移动20像素，向右移动100像素。

3.absolute（绝对定位）：

特征：元素脱离正常文档流，相对于最近的非static定位的祖先元素进行定位，如果没有非static定位的祖先元素，则相对于初始包含块（一般是浏览器窗口）进行定位，不占据原来的空间，通过设置top、bottom、left和right属性来调整元素的位置，可设置z-index属性。
使用场景：常用于创建浮动元素或将元素放置在特定位置，可以自由调整在文档中的显示位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body style="height: 2000px;">
    <!-- 参照物1 -->
    <div style="height: 100px;width: 100%;border: 5px solid black;">参照物1</div>

    <!-- 绝对定位 -->
    <div style="position: absolute; top: 20px; left: 100px;background-color: wheat;">
        这是一个绝对定位的元素，距离父元素顶部20像素，左侧100像素。
    </div>
     
     <!-- 参照物2 -->
     <div style="height: 100px;width: 100%;border: 5px solid lawngreen;">参照物2</div>
</body>
</html>

结果： CSS中的position属性详解元素脱离正常文档流，相对于最近的非static定位的祖先元素进行定位，距离父元素顶部20像素，左侧100像素。

4.fixed（固定定位）：

特征：元素相对于浏览器窗口进行定位，即使滚动页面也会保持在固定位置，不占据原来的空间，通过设置top、bottom、left和right属性来调整元素的位置，可设置z-index属性。
使用场景：常用于创建固定在屏幕上某个位置的导航栏、广告条或悬浮按钮等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body style="height: 2000px;">
    <!-- 参照物1 -->
    <div style="height: 100px;width: 100%;border: 5px solid black;">参照物1</div>

    <!-- 固定定位 -->
    <div style="position: fixed; top: 30px; left: 100px;background-color: orange;">
        这是一个固定定位的元素，距离顶部30像素，左侧100像素。
    </div> 
     
     <!-- 参照物2 -->
     <div style="height: 100px;width: 100%;border: 5px solid lawngreen;">参照物2</div>
</body>
</html>

结果：窗口未移动时： CSS中的position属性详解窗口移动时：元素相对于浏览器窗口进行定位，即使滚动页面也会保持在固定位置，不占据原来的空间，实例是一个固定定位的元素，距离顶部30像素，左侧100像素。

总结：

通过合理使用position属性，我们可以实现元素在页面中的灵活布局和定位效果。记得根据具体需求选择合适的定位属性，以达到最佳的视觉效果。