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)
上一篇 2022年7月2日 下午3:00
下一篇 2022年7月2日 下午3:00


相关推荐

  • 存储卡的使用方法大全

    存储卡的使用方法大全存储卡的使用方法大全现在购买诺基亚手机,尤其是其智能手机的朋友是越来越多了,与其他品牌的机型相比,诺基亚的手机有一个最大的优点,就是支持储存卡内存扩充的机型比较多,这让大家在使用中不必再担心手机容量的问题,这也体现了诺基亚“科技以人为本”的宣传口号。今天,就为大家讲一讲适用于诺基

    2022年7月11日
    57
  • 移位运算的问题「建议收藏」

    移位运算的问题「建议收藏」正数正数的原码,反码,补码相同正数,左移乘2,右移除2左移右移都补0如果左移丢1,会出错;如果右移丢1,会影响精度负数负数的原码左移补0,右移也补0左移丢1,会出错;右移丢1,会出错负数的反码左移补1,右移补1(因为原码补0不影响,那么反码应该补1)左移丢0,会出错(这里的0是原码中的1),右移丢0,会出错负数的补码从右往左的第一个1(包括这个1)往右的数和原码一样,

    2022年7月14日
    18
  • java json decode 中文_关于json_decode乱码及NULL的解决方法「建议收藏」

    java json decode 中文_关于json_decode乱码及NULL的解决方法「建议收藏」写接口的同学应该会经常遇到数据格式的转换,这时候必不可少的两个函数就是json_encode()和json_decode()。这两个函数使用的时候有很多的主要事项,在这里我来说一下json_decode()。json_decode():对JSON格式的字符串进行解码,接受一个JSON格式的字符串并且把它转换为PHP变量。(1)将数据转换成数组之后,打印会显示NUll:原因之一json_dec…

    2022年7月17日
    20
  • Numeric Keypad

    Numeric Keypad题目描述Thenumberickeypadonyourmobilephonelookslikebelow:123456789 0 supposeyouareholdingyourmobilephonewithsinglehand.Yourthumbpointsatdigit1.Eachtimeyoucan1)press

    2022年6月10日
    40
  • macpycharm2022.01激活码[最新免费获取]

    (macpycharm2022.01激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.htmlCJM5ZJBPHS-eyJsaWNlbnNlSW…

    2022年3月31日
    193
  • ubuntu安装QT_ubuntu安装deb命令

    ubuntu安装QT_ubuntu安装deb命令ubuntu安装QT依赖sudoapt-getinstallbuild-essential&amp;amp;&amp;amp;sudoapt-getinstalllibgl1-mesa-dev

    2022年10月15日
    4

发表回复

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

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