前端笔记 | CSS定位
一、为什么需要定位
某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子。
当滚动窗口时,某些模块是固定在屏幕中的某个位置。
以上两个效果通过标准流和浮动都无法快速实现,此时需要定位来实现。
二、定位组成
定位:将盒子定在某一位置
定位 = 定位模式 + 边偏移
(定位模式用于指定元素在文档中的定位方式,边偏移则决定了该元素的最终位置)
2.1 定位模式
定位模式决定元素的定位方式,通过CSS的position属性设置
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
2.2 边偏移
边偏移就是定位盒子移动到最终位置,有top、bottom、left、right四个属性
边偏移属性 | 示例 | 描述 |
---|---|---|
top | top: 80px | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | bottom: 80x | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | left: 80px | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | right: 80px | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
三、静态定位 static
静态定位是元素的默认定位方式,无定位的意思。
语法:
选择器 { position: static; }
- 静态定位按照标准流摆放位置,没有边偏移
四、相对定位 relative
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的。
语法:
选择器 { positon: relative; }
- 相对定位是相对自己原来的位置进行移动
- 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。即相对定位并没有脱标。
五、绝对定位 absolute
绝对定位是元素在移动位置的时候,相对于它祖先元素来说的。
语法:
选择器 { position: absolute; }
如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
父级有定位时(相对、绝对、固定定位),就会以最近一级带有定位的元素为参考点移动位置
绝对定位不在占有原先位置。
六、子绝父相
子级用绝对定位,父级用相对定位。
- 子级绝对位置,不占有位置,可以放到父盒子里面的每一个地方,不会影响到其它的兄弟盒子
- 父盒子需要加定位限制子盒子在父盒子内显示
- 父盒子布局时,需要占有位置,因此父亲只能是相对定位
七、固定定位
固定定位是元素固定于浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。
语法:
选择器 { position: fixed; }
- 以浏览器的可视窗口为参照点移动元素
- 跟父元素没有关系
- 不随着滚动条的滚动而滚动
- 固定定位不再占有原先的位置,也是脱标的
前端笔记 | CSS定位相关推荐
- Pink老师前端笔记-CSS第七天
Pink老师前端笔记-CSS第六天 # day09-前端基础CSS第七天 学习目标: 能够使用精灵图 能够使用字体图标 能够写出 CSS 三角 能够写出常见的 CSS 用户界面样式 ...
- Pink老师前端笔记-CSS第六天
Pink老师前端笔记-CSS第六天 # day08-前端基础CSS第六天 今日目标 能够说出 为什么要用定位 能够说出 定位的 4 种分类 能够说出 4 种定位各自的特点 能够说出 为什么常用子绝父相 ...
- [前端笔记——CSS] 10.层叠与继承+选择器
[前端笔记--CSS] 10.层叠与继承+选择器 1.层叠与继承 1.1 冲突规则 1.2 继承 1.3 层叠 1.4 CSS位置的影响 2.选择器 2.1 选择器是什么? 2.2 选择器列表 2.3 ...
- [前端笔记——CSS] 12.处理不同方向文本
[前端笔记--CSS] 12.处理不同方向文本 1.书写模式 2.书写模式.块级布局和内敛布局 3.逻辑属性和逻辑值 1.书写模式 CSS 中的书写模式是指文本的排列方向是横向还是纵向的.writin ...
- 前端笔记 | CSS盒子模型
CSS盒子模型 一.盒子模型 1.1 网页布局的本质 1.2 盒子模型的组成 1.3 边框border 1.4 内边距padding 1.5 外边距margin 1.6 清除内外边距 二.特殊样式 2 ...
- 前端笔记 | CSS浮动
CSS浮动 一.浮动 1.1 传统网页布局的三种方式 1.2 标准流 1.3 为什么需要浮动 1.4 什么是浮动 1.5 浮动的特性 1.6 浮动元素经常和标准流父级搭配使用 二.常见网页布局 2.1 ...
- 前端笔记 | CSS进阶
一.CSS的复合选择器 1.1 复合选择器 CSS中根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合而成的. 复合选择器可以更准确.更高效的选 ...
- 前端笔记 | CSS基础
CSS基础 一.CSS简介 1.1 HTML的局限性 1.2 CSS的作用 1.3 CSS语法规范 1.4 CSS代码风格 二.CSS基础选择器 2.1 CSS选择器的作用 2.2 选择器的分类 2. ...
- 前端笔记-css实现web自适应(当像素小于xx时隐藏此div)
目录 基本概念 关键代码 基本概念 这里是用css来搞的,本人的开发环境为Vue cli IDE为 webStorm. 这里使用 这个 @media screen and (XXXXXX)老浏览器是不 ...
最新文章
- python之抽象一
- Ubuntu12安装RobotFramework
- OO实现ALV TABLE 四:ALV的显示样式
- 杜克大学医学院禁止公开场合说中文?涉事负责人被勒令下台...
- css的input文本框的 propertychange、focus、blur
- 2万字详解,彻底讲透 全文搜索引擎 Elasticsearch
- @configuration注解_Spring注解@Configuration
- oracle全角括号忽略,Oracle中SQL查询语句日文不区分全角/半角
- 最新MT2503平台技术资料集锦
- 三维微分方程组四阶龙格库塔求解
- 云计算机什么意思啊,什么叫云计算,云计算是什么,最通俗的解释是这样的
- 新零售智慧供应链架构
- 计算机专业助理工程师,计算机助理工程师是职称吗,是什么等级的职称?
- ERROR 1366 (HY000): Incorrect string value: '\xE5\xB8\x82' for column 'address' at row 1
- 下载频道2013上半年超人气精华资源汇总---全都是免积分下载。 十分感谢这些免积分分享精华资源的好人!!...
- 【Linux/Unix】Linux中的seq命令
- PDO连接数据库及DSN详解
- WOSADO悦瞳获近3亿人民币融资;研卤堂获数千万人民币A轮融资
- avast 免费好用的杀毒软件
- 无事可做的张张,没事更新点方法吧~~~~
热门文章
- [paper reading] 译 + 注 :如何阅读 Research Papers(Andrew Ng)
- js中数组过滤、遍历、迭代every、some、filter、map、forEach、reduce、reduceRight
- 【整理总结】代码沉淀 - Caliburn.Micro - MV*模式短小精悍的框架
- 1.4 高并发之线程和进程
- 【学习】03 淘宝爬虫-使用selenium采集关键词为电动车的数据
- 在配置文件web.xml中配置Struts2的启动信息
- spring思想分析
- Exchange2003/2010共存模式环境迁移
- Android 上千张图片的列表滑动加载
- android-async-http框架之与服务器进行数据交互