【学习笔记】CSS深入理解之absolute「建议收藏」

【学习笔记】CSS深入理解之absolute「建议收藏」【学习笔记】CSS深入理解之absolute

大家好,又见面了,我是你们的朋友全栈君。

《张鑫旭的CSS深入理解之absolute》学习笔记

绝对定位的特性

绝对定位与浮动相似,都有破坏性和包裹性。浮动的一些应用场景中也可用绝对定位替代

绝对定位的行为表现

无依赖绝对定位元素

在未手动定位的情况下,绝对定位元素有以下特性

  • 去float化 – float属性将会失效
  • 跟随性 – 根据原有位置脱离文档流放置

无依赖绝对定位元素 —— 即未手动定位的绝对定位元素

无依赖绝对定位元素的使用

无依赖绝对定位元素可以使用margin值进行定位,实现脱离文档流的相对定位效果,脱离文档流可以解决溢出限制的问题

应用实例:

  1. 图标定位:角标之类的可以使用DOM位置结合绝对定位margin偏移实现定位,不一定要使父容器成为包含块
  2. 下拉框定位:下拉框和输入框之间的联系可以使用绝对定位margin偏移实现
  3. 边缘定位:利用跟随性,使元素跟随空白字符放置
  4. 图标对齐和文本溢出处理

绝对定位脱离文档流

  • 绝对定位+动画,避免回流和重绘
  • 覆盖层级,z-index + 绝对定位 > 后置绝对定位元素 > 前置绝对定位元素 > z-index > 普通元素
    https://codepen.io/curlywater…

绝对定位和width/height

  • 无固定width/height,绝对定位方向是对立的(如left vs right, top vs bottom)的时候,绝对定位元素拉伸。可应用于宽高自适应
  • 有固定width/height,绝对定位拉伸失效
  • 固定width + left + right,相当于元素有了一个固定宽度,这时使用margin: auto可达到居中效果

总结

绝对定位相对于包含块定位;
在日常使用种,一般会习惯性对父容器使用relative,使用top/bottom/left/right来脱离文档流的绝对定位;
但无依赖绝对定位元素结合margin偏移使用也可以实现一些实用的效果。

利用绝对定位元素脱离文档流的特性,使用动画可以避免大范围的回流和重绘。

绝对定位元素拉伸实现宽高自适应,可应用于大范围的布局。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107149.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 苹果屏蔽更新描述文件_屏蔽iPhone更新的iOS描述文件安装办法「建议收藏」

    屏蔽iOS更新分两种,第一种非越狱设备,只能系统在12.1以下的才能安装屏蔽描述文件safari浏览器输入ibeta.me回车,找到下图的屏蔽OTA更新,直接安装就行了第二种越狱设备,首先添加源https://xsf1re.github.io/repo/安装下图这个插件这个文件可以解除12.1以上设备描述文件失效不允许安装的问题,作者说写着兼容12.4-13.3,其他系统的老铁们自…

  • 艺术概论[通俗易懂]

    目录一.艺术的本质与特征艺术本质1.客观精神说2.主观精神说3.模仿说/再现说艺术的特征二.艺术的起源中外艺术史上关于艺术起源的五种观点艺术起源的第六种看法:多元决定论三.艺术的功能与艺术教育艺术的社会功能艺术教育四.文化系统中的艺术作为文化现象的艺术艺术与哲学艺术与宗教艺术与道德艺术与科学五.实用艺术实用艺术的主要种类实用艺术的审美特征中外实用艺术精品赏析六.造型艺术造型艺术的主要种类造型艺术的审美特征中外造型艺术精品赏析七.表情艺术表情艺术的主要种类表情艺术的审美特征中外表情艺术的精品赏析八.综合

  • 简述spark streaming的工作原理_电磁频谱优势战略

    简述spark streaming的工作原理_电磁频谱优势战略[转载] Spark Streaming 设计原理

  • 我写了一起 Makefile(一)

    我写了一起 Makefile(一)

    2021年12月17日
  • caffe中常用层: BatchNorm层详解

    caffe中常用层: BatchNorm层详解Batchnorm原理详解前言:Batchnorm是深度网络中经常用到的加速神经网络训练,加速收敛速度及稳定性的算法,可以说是目前深度网络必不可少的一部分。 本文旨在用通俗易懂的语言,对深度学习的常用算法–batchnorm的原理及其代码实现做一个详细的解读。本文主要包括以下几个部分。Batchnorm主要解决的问题Batchnorm原理解读Batchnorm的优点Batchnorm的源码解读第一…

  • OpenGrok在线代码浏览环境搭建

    OpenGrok在线代码浏览环境搭建OpenGrok是专门的源码阅读工具在针对特大型源码时,比如AOSP和Chromium,就需要祭出专门的源码阅读工具。OpenGrok属于另一类,免费,开源,运行流畅,功能也毫不逊色,该工具环境搭建和使用感觉很简单,但最近搭建的过程中遇到各种问题,直到怀疑人生,经历各种磨难最后终于可以到流程使用的程度,特此记录一方面为自己备忘,另一方面希望可以给需要搭建环境的人一些帮助,快速完成,避免重…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号