知识点摸清 - - position属性值之relative与absolute

时间:2021-06-27 09:48:42

两者共同特点是:

  1. 改变文档流
  2. 激活元素left、top、right、bottom、z-index属性
  3. 让元素”浮起来“,z-index>0

不同的是:

1.position:relative 会保留元素自己在z-index:0层的占位,其left、top、right、bottom是相对于自己在z-index:0层的位置。

2.position:absolute 完全脱离文档流,不保留元素自己在z-index:0层的占位,其left、top、right、bottom是相对于自己最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位

光看理论可能还无法有具体认识,所以来上图,有图有真相╰(  ̄ ▽  ̄ )╭

(图片来源于:CSS+DIV定位分析(relative,absolute,static,fixed) - 心碎乌托邦的日志 - 网易博客 http://blog.163.com/love_heartbreaking/blog/static/124561901201211334714800/)

1.relative保留占位

知识点摸清    - -    position属性值之relative与absolute

2.absolute不保留占位

知识点摸清    - -    position属性值之relative与absolute

3.relative相对于占位

知识点摸清    - -    position属性值之relative与absolute

4.absolute相对于自己最近的定义为absolute或relative的父层

知识点摸清    - -    position属性值之relative与absolute

5.absolute父层中都未定义absolute或relative,则相对body进行定位

知识点摸清    - -    position属性值之relative与absolute

知识点摸清 - - position属性值之relative与absolute的更多相关文章

  1. position 属性值:relative 与 absolute 区别

    absolute 能让元素 inline-block 化: 例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度. float ...

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

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

  3. 510,position的值,relative和absolute定位原点是

    (absolute:生成绝对定位的元素) position属性用来规定元素的定位类型和方式 ①position:static 默认值,没有定位,元素出现在正常的流中: ②position:fixed  ...

  4. position属性值4缺一带你了解相对还是绝对抑或是固定定位

    阿基米德说“给我一个支点,我能翘起整个地球”,在HTML页面中,给你一个坐标,可以把任何一个元素定位目标点,这就是定位!CSS有三种基本的定位机制:相对定位.绝对定位.固定定位,决定定位的positi ...

  5. css中的position属性值的探究

    css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...

  6. css3中animation属性animation-timing-function知识点以及其属性值steps()

    在animation中最重要的其实就是时间函数(animation-timing-function)这个属性,他决定了你的动画将以什么样的速度执行,所以最关键的属性值也就是cubic-bezier(n ...

  7. [转]关于position 的 static、relative、absolute、fixed、inherit

    本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...

  8. position的static、relative、absolute、fixed、inherit

    网上有很多关于position的讲解,也有很多他们属性之间的比较,但是比较全面的讲解还是比较少,每次看完过段时间就忘了,所以今天参考了很多网上现有的资源,自己整理一下,写下这篇文章. position ...

  9. [转]Html position(static、relative、absolute、fixed)

    转自:http://blog.csdn.net/topviewers/article/details/21644305 讲解不错,转载备忘. position的四个属性值: 1.relative2.a ...

随机推荐

  1. struts2常见配置

    <struts> <!--开发模式设置:该属性设置Struts2应用是否使用开发模式.如果设置该属性为true,则可以在应用出错时显示更多.更友好的出错提示.该属性只接受true和f ...

  2. 关于ie6对齐

    先来没有任何对齐时的样子: 1.一种是在父级没有高度的情况下居中. 给每个独立的元素都加上vertical-align:middle; 针对文字可以不加,加与不加都可以居中对齐.但是无法做到绝对的居中 ...

  3. UVA 11754 Code Feat 中国剩余定理&plus;暴力

    lrj白书例题,真好 #include <stdio.h> #include <iostream> #include <vector> #include <m ...

  4. js序列化json对象

    SerializeJsonToStr : function( oJson ) { if( oJson == null ) return "null"; if( typeof(oJs ...

  5. 转&colon; seajs手册与文档之 -- 配置选项

    config alias preload debug map base charset timeout noConflict config 可以使用 config 方法来配置seajs. seajs. ...

  6. iOS字典转模型MJExtension使用

    如果项目是纯OC的建议使用,MJExtension是一套字典和模型之间互相转换的超轻量级框架,可以轻松完成: 字典(JSON) --> 模型(Model) 模型(Model) --> 字典 ...

  7. es6零基础学习之项目目录创建(一)

    和大家分享一下在学习es6的过程中所积累的东西,也希望更多的朋友能够互相学习 首先创建项目目录 打开你的命令行,什么文件下都可以,大家请随意,我自己用的git,输入 mkdir es6 创建一个完整的 ...

  8. ArcGIS API for JavaScript经典例子

    地址为本地 1.绘制图形: http://localhost/arcgis_js_api/sdk/sandbox/sandbox.html?sample=toolbar_draw 2.双击编辑图形 h ...

  9. DeepWalk学习

    DeepWalk Background 使用机器学习的算法解决问题需要有大量的信息,但是现实世界中的网络中的信息往往比较少,这就导致传统机器学习算法不能在网络中广泛使用. (Ps: 传统机器学习分类问 ...

  10. Unity接入监控摄像头

    公网RTSP测试地址: rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov RTSP测试软件: EasyPlayerRTSP: https:// ...