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属性,我们可以实现元素在页面中的灵活布局和定位效果。记得根据具体需求选择合适的定位属性,以达到最佳的视觉效果。

相关推荐
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
酷酷的威朗普1 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
渊兮兮1 小时前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
一棵开花的树,枝芽无限靠近你1 小时前
【PPTist】添加PPT模版
前端·学习·编辑器·html
土豆湿2 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
鸽鸽程序猿5 小时前
【前端】CSS
前端·css
学不会•7 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
猫爪笔记13 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
爱上语文15 小时前
HTML和CSS 表单、表格练习
前端·css·html
小肚肚肚肚肚哦15 小时前
盘点浏览器盒模型中各种 width、height 、边距和位置属性
css·html