APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > html5 >

收藏
分享到

HTML5定位大全之相对定位、绝对定位和固定定位

html5 来源：互联网 作者：佚名 发布时间：2025-05-15 20:53:09 人浏览
摘要

在HTML5和CSS中，定位(positioning)是控制元素在页面上位置的重要机制。主要有四种定位方式：静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。下面我将详细讲解这三种非静

在HTML5和CSS中，定位(positioning)是控制元素在页面上位置的重要机制。主要有四种定位方式：静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。下面我将详细讲解这三种非静态定位方式，并提供相应的源代码示例。

1. 相对定位 (Relative Positioning)

特点：

  • 元素相对于其正常位置进行偏移
  • 不会脱离文档流，原来的空间仍然保留
  • 使用 top、right、bottom、left 属性进行定位
  • 常用于微调元素位置或作为绝对定位元素的参照

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

<head>

<style>

.relative-box {

  position: relative;

  left: 50px;

  top: 20px;

  width: 200px;

  height: 100px;

  background-color: lightblue;

  border: 2px solid blue;

}

</style>

</head>

<body>

<h2>相对定位示例</h2>

<p>这是一个普通段落。</p>

<div class="relative-box">这个div使用了相对定位，向右移动50px，向下移动20px。</div>

<p>注意相对定位元素原来的空间仍然保留。</p>

</body>

</html>

2. 绝对定位 (Absolute Positioning)

特点：

  • 元素相对于最近的已定位祖先元素(非static)进行定位
  • 如果没有已定位祖先，则相对于初始包含块(通常是html元素)
  • 完全脱离文档流，不占据空间
  • 使用 top、right、bottom、left 属性进行精确定位
  • 常用于创建浮动元素、对话框等

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!DOCTYPE html>

<html>

<head>

<style>

.container {

  position: relative;

  width: 400px;

  height: 200px;

  background-color: #f0f0f0;

  border: 2px solid gray;

}

.absolute-box {

  position: absolute;

  right: 20px;

  bottom: 10px;

  width: 150px;

  height: 80px;

  background-color: lightcoral;

  border: 2px solid red;

}

</style>

</head>

<body>

<h2>绝对定位示例</h2>

<div class="container">

  这是一个相对定位的容器

  <div class="absolute-box">这个div使用了绝对定位，相对于容器定位在右下角。</div>

</div>

</body>

</html>

3. 固定定位 (Fixed Positioning)

特点：

  • 元素相对于浏览器窗口进行定位
  • 不随页面滚动而移动
  • 完全脱离文档流
  • 常用于导航栏、返回顶部按钮等需要固定在屏幕某处的元素

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!DOCTYPE html>

<html>

<head>

<style>

.fixed-box {

  position: fixed;

  right: 20px;

  bottom: 20px;

  width: 100px;

  height: 50px;

  background-color: lightgreen;

  border: 2px solid green;

  text-align: center;

  line-height: 50px;

}

</style>

</head>

<body>

<h2>固定定位示例</h2>

<p>向下滚动页面，右下角的按钮会固定在相同位置。</p>

<div style="height: 2000px;">很多内容...</div>

<div class="fixed-box">固定按钮</div>

</body>

</html>

三种定位方式的主要区别

特性 相对定位 (relative) 绝对定位 (absolute) 固定定位 (fixed)
参照物 自身原始位置 最近的已定位祖先 浏览器窗口
文档流 保留原空间 脱离文档流 脱离文档流
滚动影响 随页面滚动 随祖先元素滚动 不随页面滚动
常见用途 微调元素位置、作为定位上下文 弹出层、浮动元素 导航栏、固定按钮
z-index 可应用 可应用 可应用

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

<!DOCTYPE html>

<html>

<head>

<style>

body {

  font-family: Arial, sans-serif;

  margin: 0;

  padding: 20px;

}

.container {

  position: relative;

  width: 80%;

  height: 300px;

  margin: 30px auto;

  background-color: #f5f5f5;

  border: 2px dashed #333;

  padding: 20px;

}

.relative-box {

  position: relative;

  left: 50px;

  top: 20px;

  width: 200px;

  height: 100px;

  background-color: rgba(173, 216, 230, 0.7);

  border: 2px solid blue;

}

.absolute-box {

  position: absolute;

  right: 30px;

  top: 50px;

  width: 150px;

  height: 80px;

  background-color: rgba(240, 128, 128, 0.7);

  border: 2px solid red;

}

.fixed-box {

  position: fixed;

  left: 20px;

  top: 20px;

  width: 120px;

  height: 60px;

  background-color: rgba(144, 238, 144, 0.7);

  border: 2px solid green;

  text-align: center;

  line-height: 60px;

}

.sticky-box {

  position: sticky;

  top: 10px;

  width: 100%;

  height: 50px;

  background-color: rgba(255, 255, 0, 0.7);

  border: 2px solid orange;

  text-align: center;

  line-height: 50px;

  margin-top: 20px;

}

.long-content {

  height: 1500px;

  margin-top: 30px;

  padding: 20px;

  background-color: #eee;

}

</style>

</head>

<body>

<div class="fixed-box">固定定位</div>

<h1>CSS定位方式演示</h1>

<div class="sticky-box">粘性定位(Sticky)</div>

<div class="container">

  <div class="relative-box">相对定位</div>

  <div class="absolute-box">绝对定位</div>

  <p>这是一个相对定位的容器，包含相对定位和绝对定位的元素。</p>

</div>

<div class="long-content">

  <p>向下滚动页面，观察不同定位元素的行为...</p>

  <p>固定定位元素始终在窗口固定位置。</p>

  <p>粘性定位元素在到达指定位置时会粘住。</p>

</div>

</body>

</html>

版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
  • HTML5无插件拖拽图片上传功能实现过程
    本实例展示了一种基于HTML5技术的图片上传功能，无需外部插件即可通过拖放图片实现上传。涉及到HTML5的拖放API和File API，以及使用CSS来增
  • HTML5定位大全之相对定位、绝对定位和固定定位
    在HTML5和CSS中，定位(positioning)是控制元素在页面上位置的重要机制。主要有四种定位方式：静态定位(static)、相对定位(relative)、绝对定位(
  • html5的响应式布局的方法示例
    一 使用媒体查询响应式布局 使用的参数@media这是常用的参数 width,height代表的是浏览器可视宽度，高度 device-width:设备屏幕的宽度 device-hei

  • HTML5表格语法格式介绍

    HTML5表格语法格式介绍
    一、表格 在HTML语法中，表格主要通过 table 、 tr 和 td 3个标签构成。 表格标签为 table ，行的标签为 tr ，表项的标签为 td 。 1.表格语法格式
  • HTML5中的Microdata与历史记录管理介绍
    HTML5中的Microdata与历史记录管理 背景简介 随着HTML5技术的发展，Web应用的开发和设计经历了巨大的变革。其中，Microdata作为HTML5新增的一个特
  • HTML5 data-*自定义数据属性的代码
    HTML5 引入的自定义数据属性（data-*）为开发者提供了一种将自定义数据嵌入HTML元素的标准方法。 这个特性使得在不使用非标准属性或额外的

  • 基于Canvas的Html5多时区动态时钟实战代码

    基于Canvas的Html5多时区动态时钟实战代码
    出差旅行相信大家一定会住酒店，大家在酒店的前台进行预订的时候，是不是都会留意。通常在大堂的前方会有一面时钟，大概是下面这种

  • CSS弹性布局常用设置方式

    CSS弹性布局常用设置方式
    一、单位元素 vm 1vm 为视口的1% vh 视口高的1% vmin 参照长边 vmax 参照长边 rem 等比缩放 需要设置最外层盒子html设置vw 根字号html的--- font-- 1v
  • 使用CSS3实现平滑的过渡动画效果
    要使用CSS3实现平滑的过渡动画，可以按照以下步骤进行： 1：定义初始状态：首先，为元素设置其初始样式。这通常是在CSS中直接定义的样
  • HTML5超链接的创建方法
    超链接是网页中最常用的元素，每个网页通过超链接关联在一起，构成一个完整的网站。超链接可以是网页中的任何元素，只有通过超链接
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计