【学习笔记】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)


相关推荐

  • smartgwt (A)「建议收藏」

    smartgwt (A)「建议收藏」 smartgwt一个比较陌生的名字,却充满了神奇,模糊了web应用和windows应用的界限。很多人听过gwt,是的,用java写Ajax,smartgwt不仅多了一层华丽的包装,而且将gwt发挥到了极致!三者结合所产生的优势:跨操作系统、跨浏览器(主流的)、异步的实现web应用程序。 smartgwt很大的一个特点是,即使你不会美工,也能将页面处理的很得体,很美观(限网络应用程序,不需

  • Tomcat:第二章:Tomcat日志文件分析

    Tomcat:第二章:Tomcat日志文件分析Tomcat下载地址:https://tomcat.apache.org/download-80.cgitomcat源码下载:tomcat目录结构:打开Tomcat的日志目录,也就是Tomcat安装目录下的logs目录。Tomcat的日志信息分为两类:一是运行日志,它主要记录运行过程中的一些信息,尤其是一些异常错误日志信息; 二是访问日志,它记录访问的时间、IP地址、访问的路径等相关信息。日志文件类型分析:catalina.***.log:主

  • 算法系列之九:计算几何与图形学有关的几种常用算法(一)

    算法系列之九:计算几何与图形学有关的几种常用算法(一)我的专业是计算机辅助设计(CAD),算是一半机械一半软件,《计算机图形学》是必修课,也是我最喜欢的课程。热衷于用代码摆平一切的我几乎将这本教科书上的每种算法都实现了一遍,这种重复劳动虽然意义不大,但是收获很多,特别是丢弃了多年的数学又重新回到了脑袋中,算是最大的收获吧。尽管已经毕业多年了,但是每次回顾这些算法的代码,都觉得内心十分澎湃,如果换成现在的我,恐怕再也不会有动力去做这些事情了。

  • Silverlight网站“运行后一片空白”的解决方案[通俗易懂]

    Silverlight网站“运行后一片空白”的解决方案[通俗易懂]     我近日在一次项目中,使用了ESRI的SilverlightAPI进行了开发。结果在进行网站部署时遇到了“运行后一片空白”的问题。现将解决办法如下:     如果您想在IIS服务器上使用Silverlight程序,需要使用xap、XAML文件类型,所以必须在IIS中注册xaml和xap的MIME文件类型。 打开IIS->站点属性->HTTP头->MIME类型->新建:

    2022年10月18日
  • 推荐 21 款博主常用 Windows 软件「建议收藏」

    经常会有朋友让我推荐一些好用的软件,因此我打算写一篇博客来介绍一下这些我认为爱不释手的软件

  • ANT下载与安装–windows

    ANT下载与安装–windows1.下载地址http://ant.apache.org/bindownload.cgi;2.版本信息1.10.2 .zip archive对应jdk81.9.10&#16

发表回复

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

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