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和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超链接的创建方法
    超链接是网页中最常用的元素，每个网页通过超链接关联在一起，构成一个完整的网站。超链接可以是网页中的任何元素，只有通过超链接

  • HTML5超链接和图片基础用法介绍

    HTML5超链接和图片基础用法介绍
    一、HTML5 超链接（链接） 超链接可以是一个文本，也可以是一幅图像，您可以点击这些内容来跳转到新的页面或新的文档或者当前文档中的
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计