relative:  相对定位

相对于自己本身在正常文档流中的位置进行定位 相对它原来的位置。原来在标准流中的位置继续占有。

absolute: 绝对定位

相对于最近一级定位不为static的父元素进行定位。(子决父相)。

fixed: (老版本IE不支持)固定定位

相对于浏览器窗口或者frame进行定位 跟父元素没关系。不随着滚动条的滚动而移动。固定在浏览器可视窗口的位置。

static: 默认值,没有定位

元素出现在正常的文档流中。相当none 没有定位的意思。没有边偏移几乎不用

position: sticky; 基于用户的滚动位置来定位

粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

position 的值, relative 和 absolute 分别是相对于谁进行定位的?的更多相关文章

  1. 关于position的relative和absolute分别是相对于谁进行定位的

    position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始 ...

  2. display值的作用分别是什么?relative和absolute分别是相对谁定位的?

    display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...

  3. CSS的position属性:relative和absolute

    relative:是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px.如果它之前的元素也为relati ...

  4. 定位position详解:relative与absolute

    定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...

  5. 一张图看懂css的position里的relative和absolute的区别

    position有以下属性:static.inherit.fixed.absolute.relative前三个好理解好区分:static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, b ...

  6. CSS里Postion几个取值relative、absolute、static、fixed的区别和用法

    ---恢复内容开始--- static:静态定位,也是postion的默认值,没有定位,元素出现在正常的流中,忽略top\bottom\left\right或者z-index声明. relative: ...

  7. 前端~定位属性position(relative、absolute、fixed)的分析

    前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...

  8. position 有五个值:static、relative、absolute、fixed、inherit。

    position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 ...

  9. 列出display的值,说明他们的作用。position的值, relative和 absolute定位原点是?

    display的值: block 像块类型元素一样显示. none 像行内元素类型一样显示. inline-block 像行内元素一样显示, 但其内容像块类型元素一样显示. list-item 像块类 ...

  10. position 的值absolute、fixed、relative和static的定位原点是什么

    position 的值absolute.fixed.relative和static的定位原点是什么 absolute 成绝对定位的元素,相对于值不为static的第一个父元素进行定位,也可以理解为离自 ...

随机推荐

  1. Electron初体验

    为什么使用electron 最近准备开发一个国产麒麟系统上的桌面程序,主要完成Linux命令的可视化,而electron作为目前最活跃的跨平台桌面应用程序的框架之一,它可以使用网页技术(如 HTML. ...

  2. Pipenv 使用

    Pipenv 是 Python 官方推荐的依赖管理工具,旨在简化 pip 和 virtualenv 的使用.其使用 Pipfile 和 Pipfile.lock 来管理项目的依赖和虚拟环境. 安装 p ...

  3. 总结:redis 突然变慢

    用户量暴增,无法下单,凌晨的夜,静悄悄... 经过查找发现Redis. 获取不到连接资源,并且集群中的单台 Redis 连接量很高. 大量的流量没了 Redis 的缓存响应,直接打到了 MySQL,最 ...

  4. 视频剪辑过于卡顿,让Pr更流畅的技巧 ( 待测试 )

    事件起因: 项目组某后期同事,使用Pr剪辑视频非常卡顿,但是机器配置是完全满足他的办公需求的 解决办法: 1. 降低回放分辨率 如果你的视频预览卡顿,首先应该考虑的,就是当前回放分辨率是否过高.通常在 ...

  5. php 生成唯一订单号

    php 生成唯一订单号4种方法   第一种 private function doCreateOrderNumber($time){ $i=1; $dd = date('Ymd',$time); $a ...

  6. 冒泡排序和一点优化(php)

    function maopao($arr){ $len = count($arr);//获取数组的长度 //有多少个数组元素就最多就要排n-1次 for ($j=0;$j<$len-1;$j++ ...

  7. Android usb广播 ACTION_USB_DEVICE_ATTACHED流程源码分析

    整体流程图 大概意思就是UsbHostManager启动监控线程,monitorUsbHostBus会调用usb_host_run函数(使用inotify来监听USB设备的插拔)不停的读取bus总线, ...

  8. USB设备类型代码、详细说明、查询方式

    以下是相关类型的详细说明: 地址:https://www.usb.org/documents 搜索device class 以下是USB所有支持的设备类型代码 地址:http://www.usb.or ...

  9. Android平台下的cpu利用率优化实现

    目录 背景 CPU调频 概念 实现 验证 线程CPU亲和性 概念 亲和性控制 API 应用层控制实现 验证 线程优先级 概念 实现 验证 背景 为了进一步优化APP性能,最近针对如何提高应用对CPU的 ...

  10. 解决Spring Data JPA Hibernate的N+1查询问题的性能优化最佳方法

    最佳方法:定制@NamedEntityGraph.定制查询和定制VO,可以做到按照需要最佳查询,需要注意的地方:定制VO的字段一定要等于或小于实际查询的字段,才不会复制的时候触发N+1查询. 1 问题 ...