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


相关推荐

  • RFID-RC522射频

    RFID-RC522射频与Arduino的接线方法:下载库:  搜索RC522转载于:https://www.cnblogs.com/liming19680104/p/11577035.html…

    2022年7月14日
    16
  • latex大括号错位显示_LaTeX表格

    latex大括号错位显示_LaTeX表格amsmath中\smash妙用样例-大括号错位显示。原始大括号显示\[\text{机器学习}\begin{cases}\text{~~监督学习~}{\begin{cases}\text{回归算法}\\\text{分类算法}{\begin{cases}\text{生成模型}\\\text{判别模型}\end{cases}}

    2022年10月11日
    5
  • pycharm激活码2022.01.13【2022最新】2022.01.23

    (pycharm激活码2022.01.13)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月31日
    96
  • QTcpSocket简单使用[通俗易懂]

    QTcpSocket简单使用[通俗易懂]QTcpServer类提供一个TCP基础服务类继承自QObject这个类用来接收到来的TCP连接,可以指定TCP端口或者用QTcpServer自己挑选一个端口,可以监听一个指定的地址或者所有的机器地址。调用listen()来监听所有的连接,每当一个新的客户端连接到服务端就会发射信号newConnection()调用nextPendingConnection()来接受待处理的连接。返回一个连接的QTcpSocket(),我们可以用这个返回的套接字和客户端进行连接如果有错误,serverErr.

    2025年10月11日
    8
  • Object类、常用API

    Object类、常用API

    2021年5月19日
    96
  • git clone 出现fatal: unable to access ‘https://github 类错误解决方法[通俗易懂]

    git clone 出现fatal: unable to access ‘https://github 类错误解决方法[通俗易懂]gitclone遇到问题:fatal:unabletoaccess’https://github.comxxxxxxxxxxx’:Failedtoconnecttoxxxxxxxxxxxxx将命令行里的http改为git重新执行。

    2022年7月21日
    14

发表回复

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

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