position 的值, relative 和 absolute 分别是相对于谁进行定位的?
relative: 相对定位
相对于自己本身在正常文档流中的位置进行定位 相对它原来的位置。原来在标准流中的位置继续占有。
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的第一个父元素进行定位,也可以理解为离自 ...
随机推荐
- 逆向WeChat (五)
本篇逆向mmmojo.dll,介绍如何使用mmmojo,wmpf_host_export的mojo. 本篇在博客园地址https://www.cnblogs.com/bbqzsl/p/18216717 ...
- python安装和使用常见问题以及解决技巧
1. 快速切换pip版本 pip install pip==22.2 此处22.2代表版本号 , 自动加载压缩包自动切换 2. py窗口程序不能挂代理!!!!!!!!!!!!!!!!!!!!!!!! ...
- Mac 打开软件提示‘“xxx”已损坏,无法打开。您应该将它移到废纸篓。’解决方法
产生错误的原因是软件没有签名.使用下面的命令给软件签名就好了. sudo xattr -rd com.apple.quarantine /Applications/xxx.app
- 分库分表后全局唯一ID的四种生成策略对比
分库分表之后,ID主键如何处理? 当业务量大的时候,数据库中数据量过大,就要进行分库分表了,那么分库分表之后,必然将面临一个问题,那就是ID怎么生成?因为要分成多个表之后,如果还是使用每个表的自增长I ...
- spark 中时间和日期 操作,怎么找到前几天后几天
1. timestamp 增加减少一个 time delta df.withColumn("added_hours",col("input_timestamp" ...
- ChatGPT 教我写一个基于python程序开发的网络设备巡检功能
这几天被ChatGPT玩坏了,为什么说是被玩呢,这东西真的太强大了,我现在用的还是版本3就专业溜了,现在已经有版本4了,详细一些人工智能真的还快就会取代一大批只会CV程序员,所以你有什么理由不学习呢. ...
- UWP 通过 .NET 9 和Native AOT 的支持实现 UWP 应用的现代化
微软(9 月 11 日)发布博文,微软正在预览对 .NET 9 的 UWP(通用 Windows 平台)支持,为现有 UWP 开发人员提供一条使用最新的 .NET 和本机 AOT 实现其应用程序现代化 ...
- tailwindcss 3.3.3(完成入门,需要补充每个单独样式)
归纳 修饰符堆叠 <button class="dark:md:hover:bg-fuchsia-600"> 以下为修饰符 伪类伪元素 使用方法: 在实用程序类前添加h ...
- 线段树can you answer these queries-------hdu4027
问题描述: 给定一个数列,要求对指定区间内所有数开方,输出查询区间和 输入: 有很多个测试用例,每个用例第一行输出一个整数N,表示数列有N个数,1<=N<=100000;第二行输入N个整数 ...
- Autodesk 3d Max2020 初始化闪退
事件起因:给同事安装完 Autodesk 3d Max2020 版本之后,软件初始化就闪退,后来在网上查了资料后解决. 解决办法如下:services.msc --> Autodesk 开头的服 ...