CSS中的position属性详解

前言:

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

1.static(静态定位):

  • 特征:元素遵循正常文档流,不受top、bottom、left和right属性的影响,不可设置z-index属性。
  • 使用场景:默认值,适用于大多数元素。
xml 复制代码
<!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>

结果:

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

2.relative(相对定位):

  • 特征:元素相对于其正常位置进行定位,仍然占据原来的空间,通过设置top、bottom、left和right属性来调整元素的位置,可设置z-index属性。
  • 使用场景:常用于微调元素位置或配合绝对定位元素的定位基准。
xml 复制代码
<!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>

结果: 相对于其正常位置进行定位,向下移动20像素,向右移动100像素。

3.absolute(绝对定位):

  • 特征:元素脱离正常文档流,相对于最近的非static定位的祖先元素进行定位,如果没有非static定位的祖先元素,则相对于初始包含块(一般是浏览器窗口)进行定位,不占据原来的空间,通过设置top、bottom、left和right属性来调整元素的位置,可设置z-index属性。
  • 使用场景:常用于创建浮动元素或将元素放置在特定位置,可以自由调整在文档中的显示位置。
xml 复制代码
<!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>

结果: 元素脱离正常文档流,相对于最近的非static定位的祖先元素进行定位,距离父元素顶部20像素,左侧100像素。

4.fixed(固定定位):

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

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

总结:

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

相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
小白白一枚11112 小时前
css实现div被图片撑开
前端·css
@蒙面大虾12 小时前
CSS综合练习——懒羊羊网页设计
前端·css
顾菁寒13 小时前
WEB第二次作业
前端·css·html
Qhumaing13 小时前
html第一个网页
网络·html·html5
前端Hardy18 小时前
HTML&CSS:爱上班的猫咪
前端·javascript·css·vue.js·html
聚宝盆_20 小时前
【css flex 多行均分有间隙布局】
前端·css
零希20 小时前
CSS元素类型(二)
前端·javascript·css
煎饼果子呀20 小时前
css-flex布局属性
开发语言·前端·css·html5
沈阳-施立21 小时前
CSS例子: 胶囊按钮
前端·css