【响应式Web前端设计】CSS 定位详解

1 position 属性的作用

position属性用来指定一个元素在网页上的位置,一共有4种定位方式,即position属性主要有4个值。

static
relative
fixed
absolute

2 static 属性值

static是position属性的默认值。如果省略position属性,浏览器就认为该元素是static定位。

这时,浏览器会按照源码的顺序,决定每个元素的位置,这称为"正常的页面流"(normal flow)。每个块级元素占据自己的区块(block),元素与元素之间不产生重叠,这个位置就是元素的默认位置。

在这里插入图片描述
注意,static定位所导致的元素位置,是浏览器自主决定的,所以这时top、bottom、left、right这四个属性无效。

3 relative,absolute,fixed

relative、absolute、fixed这三个属性值有一个共同点,都是相对于某个基点的定位,不同之处仅仅在于基点不同。所以,只要理解了它们的基点是什么,就很容易掌握这三个属性值。

这三种定位都不会对其他元素的位置产生影响,因此元素之间可能产生重叠。

3.1 relative 属性值

relative表示,相对于默认位置(即static时的位置)进行偏移,即定位基点是元素的默认位置。

在这里插入图片描述
在这里插入图片描述

它必须搭配top、bottom、left、right这四个属性一起使用,用来指定偏移的方向和距离。

在这里插入图片描述
div {
position: relative;
top: 20px;
}
上面代码中,div元素从默认位置向下偏移20px(即距离顶部20px)。

3.2 absolute 属性值

absolute表示,相对于上级元素(一般是父元素)进行偏移,即定位基点是父元素。

它有一个重要的限制条件:定位基点(一般是父元素)不能是static定位,否则定位基点就会变成整个网页的根元素html。另外,absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。

在这里插入图片描述

/*
HTML 代码如下

*/

#father {
positon: relative;
}
#son {
position: absolute;
top: 20px;
}

上面代码中,父元素是relative定位,子元素是absolute定位,所以子元素的定位基点是父元素,相对于父元素的顶部向下偏移20px。如果父元素是static定位,上例的子元素就是距离网页的顶部向下偏移20px。

注意,absolute定位的元素会被"正常页面流"忽略,即在"正常页面流"中,该元素所占空间为零,周边元素不受影响。

3.3 fixed 属性值

fixed表示,相对于视口(viewport,浏览器窗口)进行偏移,即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化,好像固定在网页上一样。

在这里插入图片描述
它如果搭配top、bottom、left、right这四个属性一起使用,表示元素的初始位置是基于视口计算的,否则初始位置就是元素的默认位置。

div {
position: fixed;
top: 0;
}
上面代码中,div元素始终在视口顶部,不随网页滚动而变化。

李响Superb CSDN认证博客专家 机器学习 TensorFlow 图像处理
成为一名优秀的算法工程师⬆️ ,
目前还在读软件工程,
AI攻防、算法和深度学习方向,
微博同名❤️ :李响Superb,
(记得关注,有问题微博私信!)
我们一起努力呀!
已标记关键词 清除标记
相关推荐
目录 第1章 HTML 5简介 1 1.1 HTML历史与HTML 5 2 1.2 HTML 5的优势 6 1.3 HTML 5的基本结构和语法变化 8 1.4 本章小结 12 第2章 HTML 5的常用元素与属性 14 2.1 HTML 5保留的常用元素 15 2.2 HTML 5增强的iframe元素 34 2.3 HTML 5保留的通用属性 40 2.4 HTML 5新增的通用属性 44 2.5 HTML 5新增的结构元素 48 2.6 HTML 5新增的语义元素 55 2.7 HTML 5头部和元信息 59 2.8 HTML 5新增的拖放API 63 2.9 本章小结 71 第3章 HTML 5表单相关的元素和属性 72 3.1 HTML原有的表单及表单控件 73 3.2 HTML 5新增的表单属性 83 3.3 HTML 5新增的表单元素 90 3.4 HTML 5新增的客户端校验 96 3.5 本章小结 100 第4章 HTML 5的绘图支持 101 4.1 使用canvas元素 102 4.2 绘图 103 4.3 坐标变换 118 4.4 控制叠加风格 123 4.5 控制填充风格 124 4.6 位图处理 128 4.7 输出位图 132 4.8 动画制作 133 4.9 本章小结 136 第5章 HTML 5的多媒体支持 137 5.1 使用audio和video元素 138 5.2 使用JavaScript脚本控制媒体播放 141 5.3 事件监听 144 5.4 track元素 146 5.5 本章小结 149 第6章 级联样单与CSS选择器 150 6.1 样单概述 151 6.2 CSS单的基本使用 152 6.3 CSS选择器 158 6.4 伪元素选择器 167 6.5 CSS 3新增的伪类选择器 176 6.6 在脚本中修改显示样 195 6.7 本章小结 197 第7章 字体与文本相关属性 198 7.1 字体相关属性 199 7.2 CSS 3支持的颜色表示方法 205 7.3 文本相关属性 206 7.4 CSS 3新增的服务器字体 212 7.5 本章小结 215 第8章 背景、边框和边距相关属性 216 8.1 盒模型简介 217 8.2 背景相关属性 217 8.3 使用渐变背景 226 8.4 边框相关属性 239 8.5 使用opacity控制透明度 246 8.6 padding和margin相关属性 247 8.7 本章小结 249 第9章 大小、定位、轮廓相关属性 250 9.1 width、height相关属性 251 9.2 定位相关属性 255 9.3 轮廓相关属性 257 9.4 用户界面和滤镜属性 258 9.5 本章小结 263 第10章 盒模型与布局相关属性 264 10.1 盒模型和display属性 265 10.2 对盒添加阴影 275 10.3 布局相关属性 278 10.4 CSS 3新增的多栏布局 285 10.5 使用弹性盒布局 289 10.6 本章小结 306 第11章 表格、列表相关属性及media query 307 11.1 表格相关属性 308 11.2 列表相关属性 313 11.3 控制光标的属性 316 11.4 media query和响应布局 317 11.5 本章小结 323 第12章 变形与动画相关属性 324 12.1 CSS 3提供的变形支持 325 12.2 CSS 3新增的3D变换 337 12.3 CSS 3提供的Transition动画 341 12.4 CSS 3提供的Animation动画 345 12.5 本章小结 349 第13章 JavaScript语法详解 350 13.1 JavaScript简介 351 13.2 数据类型和变量 356 13.3 基本数据类型 364 13.4 复合类型 376 13.5 运算符 381 13.6 语句 391 13.7 流程控制 395 13.8 函数 403 13.9 函数的参数处理 425 13.10 面向对象 429 13.11 创建对象 437 13.12 本章小结 443 第14章 DOM编程详解 444 14.1 DOM模型概述 445 14.2 DOM模型和HTML文档 446 14.3 访问HTML元素 448 14.4 修改HTML元素 456 14.5 增加HTML元素 458 14.6 删除HTML元素 463 14.7 传统的DHTML模型 467 14.8 使用window对象 469 14.9 navigator和地理定位 479 14.10 HTML 5增强的History API 485 14.11 使用document对象 490 14.12 HTML 5新增的浏览器分析 493 14.13 本章小结 496 第15章 事件处理机制 497 15.1 事件模型的基本概念 498 15.2 绑定事件处理函数 499 15.3 事件处理函数的执行环境 505 15.4 事件类型 521 15.5 本章小结 534 第16章 本地存储与离线应用 535 16.1 Web Storage 536 16.2 Indexed数据库API 545 16.3 离线应用 564 16.4 本章小结 571 第17章 文件支持与二进制数据 572 17.1 HTML 5增强的文件上传域 573 17.2 ArrayBuffer与TypedArray 578 17.3 Blob类 583 17.4 本章小结 587 第18章 Web Worker多线程API 588 18.1 使用Worker创建多线程 589 18.2 与Worker线程进行数据交换 591 18.3 Worker线程嵌套 594 18.4 使用SharedWorker创建共享线程 597 18.5 Promise 603 18.6 本章小结 611 第19章 客户端通信 612 19.1 跨文档消息传递 613 19.2 使用WebSocket与服务器通信 621 19.3 使用Server-Sent Events API 630 19.4 使用Beacon 635 19.5 本章小结 636 第20章 HTML 5的疯狂俄罗斯方块 637 20.1 俄罗斯方块简介 638 20.2 开发游戏界面 639 20.3 俄罗斯方块的数据模型 640 20.4 实现游戏逻辑 644 20.5 本章小结 654
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值