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. 用GDI+旋转多边形来绘制一个时钟摸拟小程序

    效果图 在头文件类中声明变量 TCHAR m_dayStr[4]; // 日期 TCHAR m_weekStr[4]; // 星期 Gdiplus::Font* m_pFont; // 字体 Gdip ...

  2. 折腾 Quickwit,Rust 编写的分布式搜索引擎(专为从对象存储中实现亚秒级搜索而设计)

    什么是 Quickwit? Quickwit 是首个能在云端存储上直接执行复杂的搜索与分析查询的引擎,并且具有亚秒级延迟.它借助 Rust 语言和分离计算与存储的架构设计,旨在实现资源高效利用.易于操 ...

  3. visual studio安装MFC模板

    计算机图形学 奇怪的重点 需要单击选中使用C++的桌面开发 才会跳出右侧的选项 要么就是展开右侧的收缩

  4. wget 提示 "无法验证 xxxx.xxx 的由 “xxx” 颁发的证书: 无法本地校验颁发者的权限。"

    有一天在使用 wget 下载文件时,出现了无法验证证书的提示: $ wget https://github.com/zayronxio/Mkos-Big-Sur/releases/download/0 ...

  5. druid数据库连接池在使用中遇到的一些问题和说明

    get connection timeout retry : 1 2024-02-06 11:18:26.364 ERROR 23752 --- [eate-1838225797] com.aliba ...

  6. 给网站添加Let's Encrypt的免费ssl证书

    概要 目前很多浏览器默认都会标记http访问的网站为不安全,https部署已经称为大趋势,我之前利用业余时间搭建了一个网站,本文就以这个域名为基础说明如何给网站加上证书.本文使用的操作系统centos ...

  7. keycloak~scope客户端模板的使用

    scope为何物? scope在oauth2中表示授权的范围,另外也可以理解为,根据认证时scope的参数,在构建jwt时,返回更多的信息:比如在keycloak中,你的可选scope(optiona ...

  8. [Udemy] AWS Certified Data Analytics Specialty - 6.Security

    S3 加密 SSE-S3 SSE-KMS SSE-C Client Side Encryption SSL/TLS S3 支持http/https 两种协议 KMS KMS最大能加密4KB的数据,再大 ...

  9. OData – 坑

    前言 OData 有很多很多的坑,我的主张是能少用一样是一样,比如 Batch Processing 不要用,Inheritance 不要用,除了 GET 其它 PUT POST DELETE 都不要 ...

  10. 2024年常用的Net web框架

    ASP.NET Core 框架声明:是微软推出的新一代开源.跨平台的 Web 应用框架,用于构建高性能.现代化的 Web 应用程序. 官网地址:https://dotnet.microsoft.com ...