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

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. 解决小程序uni-app echars层级过高问题

    使用 force-use-old-canvas="false" 使用微信小程序的cover-view会有很多问题,并且不一定生效,只需要在canvas的标签内添加 force-us ...

  2. C语言:将文件中所得到的单词表保存到一个顺序表中--使用动态分配数组。

    在很多时候我们想要在程序中存储想要的信息,但是又不知道该信息的大小或者说不知道需要多长的数组来存放.动态分配空间这个很好的解决了这个问题,动态分配不仅只可以用在链表中分配节点空间,其实更多时候用来分配 ...

  3. 【力扣-TS解题】1、回文数

    给你一个整数 x ,如果 x 是一个回文整数,返回 true :否则,返回 false . 回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 例如,121 是回文,而 123 不是 来源 ...

  4. springboot 整合 recketMQ 详细步骤

    前提 RocketMQ的部署环境可用 1 依赖包 <dependency> <groupId>org.apache.rocketmq</groupId> <a ...

  5. 【c#】JavaScriptSerializer 不序列化null值

    首先引用dll :System.Web.Extensions. 再自定义转换器代码如下: public class JavaScriptSerilizeConvert : JavaScriptConv ...

  6. .NET集成DeveloperSharp实现http网络请求&与其它工具的比较

    爆了,爆了,DeveloperSharp系列近期又被制造业ERP.民航飞行App.建筑BIM.电力掌上营业厅.等多家大型采用,站在巨人的肩膀上你能走的更远. 支持.Net Core2.0及以上,支持. ...

  7. ChatGPT-4o模型功能介绍

    1.概述 OpenAI 持续突破人工智能的边界,推出了其最新模型 ChatGPT-4o,作为 ChatGPT-4 的继承者,该模型有望带来显著的提升和创新功能.本文将深入解析 ChatGPT-4 与 ...

  8. 音视频学习--H264解析渲染

    一.H264文件获取 下载一段MP4文件,通过FFMPEG转换成MP4 ffmpeg -i Gravity.mp4 -vcodec h264 out_2.264 二.通过解析H264成帧,然后刷新 这 ...

  9. Maven工程报错org.codehaus.plexus.component.repository.exception.ComponentLookupException

    本人电脑环境:jdk1.8,idea2021,maven 3.6.3 问题:今天调整maven项目的三个配置参数后,idea报了下面的错误 org.codehaus.plexus.component. ...

  10. 面试必问:MySQL死锁 是什么,如何解决?(史上最全)

    MySQL死锁接触少,但面试又经常被问到怎么办? 最近有小伙伴在面试的时候,被问了MySQL死锁,如何解决? 虽然也回答出来了,但是不够全面体系化, 所以,小北给大家做一下系统化.体系化的梳理,帮助大 ...