position的值, relative和absolute分别是相对于谁进行定位的?
relative: 相对定位,相对于自己本身在正常文档流中的位置进行定位 相对它原来的位置,在走100px。原来在标准流中的位置继续占有。
absolute: 生成绝对定位,相对于最近一级定位不为static的父元素进行定位。(子决父相)。
fixed: (老版本IE不支持)生成绝对定位,相对于浏览器窗口或者frame进行定位 跟父元素没关系。不随着滚动条的滚动而移动。固定在浏览器可视窗口的位置。
static: 默认值,没有定位,元素出现在正常的文档流中。相当none 没有定位的意思。没有边偏移我们几乎不用。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
position的值, relative和absolute分别是相对于谁进行定位的?的更多相关文章
- 关于position的relative和absolute分别是相对于谁进行定位的
position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始 ...
- display值的作用分别是什么?relative和absolute分别是相对谁定位的?
display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...
- CSS的position属性:relative和absolute
relative:是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px.如果它之前的元素也为relati ...
- 定位position详解:relative与absolute
定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...
- 一张图看懂css的position里的relative和absolute的区别
position有以下属性:static.inherit.fixed.absolute.relative前三个好理解好区分:static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, b ...
- CSS里Postion几个取值relative、absolute、static、fixed的区别和用法
---恢复内容开始--- static:静态定位,也是postion的默认值,没有定位,元素出现在正常的流中,忽略top\bottom\left\right或者z-index声明. relative: ...
- 前端~定位属性position(relative、absolute、fixed)的分析
前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...
- position 有五个值:static、relative、absolute、fixed、inherit。
position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 ...
- 列出display的值,说明他们的作用。position的值, relative和 absolute定位原点是?
display的值: block 像块类型元素一样显示. none 像行内元素类型一样显示. inline-block 像行内元素一样显示, 但其内容像块类型元素一样显示. list-item 像块类 ...
- position 的值absolute、fixed、relative和static的定位原点是什么
position 的值absolute.fixed.relative和static的定位原点是什么 absolute 成绝对定位的元素,相对于值不为static的第一个父元素进行定位,也可以理解为离自 ...
随机推荐
- CentOS7部署Docker(联网)
一.参考地址 https://blog.csdn.net/m0_49762804/article/details/131398587 二.Docker安装 安装依赖环境,yum-utils ## 检查 ...
- 线程中使用for循环的add或remove方法的两种方案
简介 (Introduction): 背景 在使用线程中添加list的元素时,使用add或remove就会产生异常. 分析 该list每当删除/添加一个元素时,集合的size方法的值都会减小1,这将直 ...
- 4G EPS 中的随机接入
目录 文章目录 目录 前文列表 UE 的随机接入 基于竞争的随机接入流程 基于非竞争的随机接入流程 PRACH(物理随机接入信道) 上行 TA(时间提前量) 前文列表 <4G EPS 中的小区搜 ...
- 4G EPS 中的小区搜索
目录 文章目录 目录 前文列表 小区搜索(Cell Search)流程 PSS(主同步信号)与 SSS(辅同步信号) DL-RS(下行参考信号) PBCH(物理广播信道) PDSCH(物理下行共享信道 ...
- Dapr 与 .NET Aspire 结合使用获得无与伦比的本地开发体验
Dapr 提供了一组构建块,用于抽象分布式系统中常用的概念.这包括服务.缓存.工作流.复原能力.机密管理等之间的安全同步和异步通信.不必自己实现这些功能,可以消除样板,降低复杂性,并允许您专注于开发业 ...
- webapi创建WCF WebService+WCF WebService远程服务调用
首先需要引入soapcore包 这个包提供了所需的类和soap终结点中间件. 引入这个这个包之后,我们需要定义提供的服务. 这里我写了一个用于查询省份面积的服务. 省份信息服务 /// <sum ...
- gorm指定数据字段名字
type Products struct { gorm.Model SaleNum uint ` json:"saleNum"` CarNum uint ` json:" ...
- HTML——input之复选框
在 HTML 中,把 <input> 标签中的 type 属性设置为 checkbox 可以实现多选框的效果.具体语法格式如下: <input type="checkbox ...
- Wpf Bitmap(Image)Base64,Url,文件Path,Stream转BitmapSource(ImageSource),无需外部dll
直接上代码 using System; using System.Drawing; using System.IO; using System.Windows.Forms; using System. ...
- MySQL学习笔记-存储引擎
存储引擎 一. MySQL体系结构 MySQL Server 连接层:连接的处理.认证授权.安全方案.检查是否超过最大连接数等. 服务层:SQL接口.解析器.查询优化器.缓存 引擎层:引擎是数据存储和 ...