CSS深入理解absolute

CSS深入理解absolute1.图片目标来覆盖,无依赖,真不赖;2.如何定位下拉框,最佳实践来分享;3.对其居中或边缘,定位实现有脸面;4.星号时有时没有,破坏队形不用愁;5.图文对其兼容差,绝对定位来开挂;6.文字溢

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

1.图片目标来覆盖,无依赖,真不赖;

2.如何定位下拉框,最佳实践来分享;

3.对其居中或边缘,定位实现有脸面;

4.星号时有时没有,破坏队形不用愁;

5.图文对其兼容差,绝对定位来开挂;

6.文字溢出不够放,不值一提就小样!

 

z-index无依赖

1.如果只有一个绝对定位元素,自然不需要z-index,自动覆盖普通元素;

2.如果两个绝对定位,控制DOM流的前后顺序达到需要的覆盖效果,依然无z-index;

3.如果多个绝对定位交错,非常非常少见,z-index:1  控制;

4.如果非弹框类的绝对定位元素z-index>2,必定z-index冗余,请优化!

 

 

折翼天使absolute 真不是闹着玩的

 

 

斩断情欲大天使-定位

 

藕断丝连半天使

7.left/top/right/bottom与width/height异曲同工与特殊表现

相互替代性:绝对定位方向是对立的(如:left vs right,top vs bottom)的时候,结果不是瞬间位移,而是身体的爆裂拉伸

相互合作性:同时存在时 width/height 大于天使拉伸 

当尺寸限制,拉伸以及码marigin:auto同时出现的时候,就会有绝对定位元素的绝对居中效果!ie8+支持

8.absolute网页整体布局 (适合移动web的布局策略)

<span role="heading" aria-level="2">CSS深入理解absolute<span role="heading" aria-level="2">CSS深入理解absolute<span role="heading" aria-level="2">CSS深入理解absolute<span role="heading" aria-level="2">CSS深入理解absolute

absolute 和 float 相似兄弟

 

 

 

 

from慕课 张鑫旭老师

个人留坑 留作笔记

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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/155246.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • AVC1与H264的差别

    AVC1与H264的差别

    2021年12月3日
    54
  • 网站备案的注意事项

    网站备案的注意事项

    2021年9月22日
    57
  • cefsharp 执行js_怎么防止js注入

    cefsharp 执行js_怎么防止js注入我试图注入的JavaScript文档的页面后,加载磁头:CefSharpJavaScript注入varbrowserSettings=newBrowserSettings();browserSettings.FileAccessFromFileUrlsAllowed=true;browserSettings.UniversalAccessFromFileUrlsAllowed=t…

    2025年12月3日
    3
  • 服务器资源监控工具—nmon

    服务器资源监控工具—nmon      在性能测试过程中,对服务端的各项资源使用情况进行监控是很重要的。对于监控服务器资源的工具nmon是最好不过了。      nmon不仅可以监控内存使用情况、磁盘适配器、文件系统中的可用空间、CPU使用率、页面空间和页面速度、异步I/O(仅适用于AIX)、网络文件系统(NFS)、磁盘I/O速度和读写比率、服务器详细信息和资源、内核统计信息、消耗资源进程、运行队列信息等。而且它资源…

    2022年5月12日
    45
  • js 符号转换 html代码

    js 符号转换 html代码S转换HTML转义符//去掉html标签//普通字符转换成转意符//转意符换成普通字符//转成空格//回车转为br标签//去除开头结尾换行,并将连续3次以上换行转换成2次换行//将多

    2022年7月1日
    26
  • 史上最简单的 MyBatis 教程(一)

    史上最简单的 MyBatis 教程(一)1简介MyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架,其几乎消除了所有的JDBC代码和参数的手工设置以及结果集的检索。MyBatis使用简单的XML或注解用于配置和原始映射,将接口和Java的POJOs(PlainOldJavaObjects,普通的Java对象)映射成数据库中的记录。MyBatis应用程序大都使用SqlSessionFac

    2025年7月22日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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