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


相关推荐

  • 三菱modbusRTU通讯设置表_modbus通讯实例

    三菱modbusRTU通讯设置表_modbus通讯实例点击箭头处“工业之家”,选择“关注公众号”!三菱PLC接线图干货此次主要描述的是关于三菱FX5U模块硬件的接线实例,主要有以下几个方面:电源AC、DC接线、输入输出接线、模拟量接线。不同原理不同的接线方式,现在来给大伙仔细讲解分享!AC电源接线例:漏型输入[-公共端]时的电源接线例源型输入[+公共端]时的电源接线例使用FX5-1PSU-5V时的外部接线例(漏型输入[-公共端])…

    2025年10月19日
    7
  • “光猫”调制解调器 和 路由器的区别 傻傻分不清

    “光猫”调制解调器 和 路由器的区别 傻傻分不清一、“猫”指调制解调器,所谓调制,就是把数字信号转换成电话线上传输的模拟信号;解调,即把模拟信号转换成数字信号。合称调制解调器。调制解调器的英文是“Modem”,读音与“猫”相似,因此被称作“猫”。简单来说,“猫”的主要作用是上连宽带线路,下连电脑,实现电脑与宽带的连接,这样电脑才能够正常上网。路由器,又称网关设备,英文名是“Router”,是连接因特网中各局域网、广域网的设备,它会根据信…

    2025年7月12日
    6
  • 精美网站赏析_怎么收藏网址到收藏夹

    精美网站赏析_怎么收藏网址到收藏夹英文网站1链接地址享笑网个人博客交流网站蓝色网站商城黑色网站后台管理系统橙色企业信息管理系统韩国情侣酒店网站模板bootstrap制作的企业后台模板个人空间网站黑色主题网页

    2022年8月3日
    5
  • java从入门到精通_Java 入门到精通的过程

    java从入门到精通_Java 入门到精通的过程有读者留言说:“希望能写写前期阶段程序员的发展经历。”收到这个问题后确实引发了我的一些回忆和思考,回想如果让我再重走一遍过来的路,在哪些方面还需要去改善呢?以前并没有提及如何去做才能更好更快的发展成长,所以本篇借用了一个大家耳熟能详的名称模式,从一个稍微高一层的抽象维度来回答How的问题。定位还记得当初为什么选择程序员这个职业么?如今程序员所在的行业处于发展上升期,薪酬待遇整体高于传统行业,…

    2022年7月8日
    24
  • __setattr__,setattr(),getattr__,getattr()及__getattribute__的区别

    __setattr__,setattr(),getattr__,getattr()及__getattribute__的区别Python2.7IDEPycharm5.0.3首先,给一波定义__setattr__(self,name,value)#当试图给特性name赋值时候自动被调用,其余方法同理#相当于触发机制__getattribute__(self,item)#每次通过实例化访问属性都会通过该函数#如果没有该属性,则访问完该函数后,再会通过__getattr__函数_setattr_和_get

    2025年6月23日
    3
  • h5学习笔记:vuethink 配置

    h5学习笔记:vuethink 配置

    2021年10月13日
    68

发表回复

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

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