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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 10_hadoop之hive

    10_hadoop之hive

    2021年8月22日
    59
  • 开源项目推荐:Qt有关的GitHub/Gitee开源项目(★精品收藏★)

    开源项目推荐:Qt有关的GitHub/Gitee开源项目(★精品收藏★)QtCreator环境:使用QtCreator作为LinuxIDE,代替Vim:实现两台Linux电脑远程部署和调试(一台电脑有桌面系统,一台电脑无桌面系统)使用QtCreator作为LinuxIDE,实现CMake编译和单步调试在QtCreator中使用make构建,运行,调试通用C/C++项目使用QtCreator作为LinuxIDE,实现Nginx和Redis…

    2022年6月15日
    40
  • smalldatetime和datetime的差别

    smalldatetime和datetime的差别碰上了这件事,才学到教训,一直以为smalldatetime和datetime的差别只是在于时间范围:smalldatetime的有效时间范围1900/1/1~2079/6/6datetime的有效时间范围1753/1/1~9999/12/31所以我判断如果该值不用到太远的日期范围,就会使用smalldatetime。但我忽略了更关键的差别,那就是smalldatetime只精准到分,而datet…

    2022年5月19日
    28
  • pycharm的git_pycharm版本控制

    pycharm的git_pycharm版本控制1、createpatchcreatepatch打补丁,当连接不上git服务器时,可以先本地打补丁,生成一个文件,里面记录了文件变更信息,后面可以随时提交至git服务器2、checkoutrevisioncheckoutrevision检出版本,可以回退到任意版本,右边会显示当前检出版本与上一版本的变化3、newbranchnewbranch建立新的分…

    2022年8月29日
    0
  • Xshell连接虚拟机失败的解决方法

    Xshell连接虚拟机失败的解决方法  最近这一周由于自己的xshell突然连接不到虚拟机,在网上找了很多种方法也没能解决,以至于自己在学习很多知识的时候都没能很好的去验证,去尝试。最后在求助大佬的时候终于将xshell重新连接到了虚拟机!!    以下是我对xshell连接不到虚拟机的几种方法的总结,希望对大家能有帮助:方法一:   1.首先查看利用 ifconfig命令去查看IP地址,如下图:…

    2022年9月22日
    0
  • 数据库隔离级别—MySQL的默认隔离级别就是Repeatable,Oracle默认Read committed,最高级别Serializable

    数据库隔离级别—MySQL的默认隔离级别就是Repeatable,Oracle默认Read committed,最高级别Serializable数据库隔离级别—MySQL的默认隔离级别就是Repeatable,Oracle默认Readcommitted,最高级别Serializable

    2022年5月9日
    93

发表回复

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

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