HTMLCSS Day06 CSS定位布局
文章目录
- 1.定位布局
- - 1.1.静态定位( Static positioning)
- - 1.2.什么是相对定位?( Relative positioning )
- - 相对定位注意点
- - 相对定位应用场景
- - 1.3.什么是绝对定位?(Absolute positioning)
- - 绝对定位参考点
- -绝对定位注意点
- - 绝对定位-子绝父相
- -绝对定位水平居中
- - 1.4.固定定位(Fixed positioning)
- - 1.5.粘滞定位( Sticky positioning )
- 使用条件:
- - 1.6.z-index
1.定位布局
- 1.1.静态定位( Static positioning)
是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。
position: static;
- 1.2.什么是相对定位?( Relative positioning )
相对定位就是相对于自己以前在标准流中的位置来移动
position: relative;
使用top,right,bottom,left来控制
- 相对定位注意点
- 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
- 在相对定位中同一个方向上的定位属性只能使用一个
- 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
- 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位 的元素设置margin/padding等属性的时会影响到标准流的布局
- 相对定位应用场景
- 用于对元素进行微调
- 配合后面学习的绝对定位来使用
- 1.3.什么是绝对定位?(Absolute positioning)
绝对定位就是相对于body来定位
position: absolute;
- 绝对定位参考点
1.规律
默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流 的那个祖先元素作为参考点。
2.1只要是这个绝对定位元素的祖先元素都可以
2.2指的定位流是指绝对定位/相对定位/固定定位
2.3定位流中只有静态定位不行
3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。
-绝对定位注意点
1.绝对定位的元素是脱离标准流的
2.绝对定位的元素是不区分块级元素/行内元素/行内块级元素
3.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
4.一个绝对定位的元素会忽略祖先元素的padding
- 绝对定位-子绝父相
相对定位弊端:
相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
绝对定位弊端:
默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化
子绝父相
子元素用绝对定位, 父元素用相对定位
-绝对定位水平居中
只需要设置绝对定位元素的left:50%;
然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;
- 1.4.固定定位(Fixed positioning)
1.什么是固定定位?
position: fixed;
固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定 定位可以让某个盒子不随着滚动条的滚动而滚动。
注意点:
1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间
2.固定定位和绝对定位一样不区分行内/块级/行内块级
- 1.5.粘滞定位( Sticky positioning )
position: sticky;
结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
设置了position: sticky的元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。
亦即如果设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上
移动(此时相当于fixed定位)。
设置 position:sticky
同时给一个 (top,bottom,right,left)
之一即可
使用条件:
父元素不能overflow:hidden或者overflow:auto属性。
必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
父元素的高度不能低于sticky元素的高度
sticky元素仅在其父元素内生效
- 1.6.z-index
1.什么是z-index属性?
默认情况下所有的元素都有一个默认的z-index属性, 取值是0.
z-index属性的作用是专门用于控制定位流元素的覆盖关系的
2.默认情况下定位流的元素会盖住标准流的元素
3.默认情况下定位流的元素后面编写的会盖住前面编写的
4.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面
注意点:
1.从父现象
1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上 面。
1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说 谁的父元素的z-index属性比较大谁就会显示在上面。
HTMLCSS Day06 CSS定位布局相关推荐
- 一、CSS定位布局[相对定位、绝对定位、固定定位]
一.CSS定位布局 选项 说明 static 默认形为,属于文档流 relative 相对定位 absolute 绝对定位 fixed 固定定位 1.relative 解释:元素在原来的位置开始移动( ...
- 学习笔记~1.3 CSS 定位布局
1.3 CSS 定位布局 笔者为正在学习web前端开发基础的菜鸟,计划先学习祖传三大件:HTML CSS及JS.写博客主要是为了加深记忆,以及把自己所学分享.本博客的内容主要为学习笔记,由于自学,其中 ...
- CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...
- css位置布局,CSS定位布局相关
本文档包括CSS的 样式 定位 框模型 如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动.当文档滚动到超过图像的位置时,图像就会消失. 您可以通过 background-p_w_upload ...
- CSS定位布局:静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位
目录 1.定位布局 1.1.静态定位( Static positioning) 简单代码实现: - 1.2.什么是相对定位?( Relative positioning ) 简单代码实现: - 1 ...
- CSS 定位布局 - 相对、绝对、固定三种定位
仅供学习,转载请注明出处 文档流 文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的 ...
- CSS定位布局流和网络请求引入
布局,定位 1标准流 1.1HTML标签分类: 块级标签 (独占一行,可以设置宽高) 行级标签(不独占一行,不能设置宽高) 1.2按照标准流进行排列,块级标签从上到下,行级标签从左到右. displa ...
- HTMLCSS——利用CSS定位背景图片 background-position
我们在研究其他的网站的样式的时候经常会发现一种情况,就是在很多background属性里都调用同一张图片,来满足网页各个部分的使用.打开这种图片看一下,会发现这张图片上包含了很多小图片; 又如: 这些 ...
- CSS - 弹性布局(flex)
目录 传统布局的不足之处:导航栏实现案例说明问题 关于单个.一行多个浮动元素的水平居中实现 弹性布局 弹性容器的主轴和侧轴概念 弹性容器的主轴对齐&侧轴对齐(一维布局特性说明) 主轴flexi ...
最新文章
- 输出stage.displayState等于null原因
- Winform中在FastReport的PreviewControl预览控件中对report控件模板中控件值进行修改
- Java学习笔记—UDP通信
- Spark中foreachPartition和mapPartitions的区别
- CocoaPods 错误 target overrides the `OTHER_LDFLAGS`...
- 修改mysql数据库默认字符集_MySQL数据库之修改mysql默认字符集的两种方法详细解析...
- 对《构建之法——现代软件工程》13-17章的困惑与思考
- Tensorflow训练CIFAR10源代码
- js计算100以内所有奇数的和
- 【测试】史上最详细的测试用例设计方法讲解
- 搜狗收录域名的方法及工具
- 宠物王国6java变态版,宠物王国外传999999级变态版
- 2017腾讯校招机试题
- 怎么取消工作组计算机,windows10系统如何退出workgroup工作组 windows10系统退出workgroup工作组的操作方法...
- Lipschitz条件
- React 待办事项列表案例
- EasyRecovery年中狂欢还没结束,震惊
- 超级高铁创企HTT晒最新测试轨道图 计划今年4月份开始测试
- 变电站巡检机器人工作中有哪些常见问题?该如何解决
- 最新亲测转转交易猫闲鱼后台源码
热门文章
- 语音识别芯片工作原理,哪款离线语音芯片值得尝试?WTK6900H
- 中国大学慕课C语言入门翁恺老师 第五周测试 第二题 念整数
- 积分系统软件怎么做?如何用积分机制快速“抓住用户”?
- 断电后如何快速恢复网络
- 美团(Leaf)分布式ID算法(实战)
- 前端的就业行情怎么样?
- 微信小程序开发扫条码wx.scanCode报scanCode:fail
- メイプルストーリー、「魔法少女まどか☆マギカ」とのタイアップを実施
- 画论09 李嗣真《续画品录》
- D. Jon and Orbs (概率dp)