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


相关推荐

  • RenderControl输出html遇到的问题

    RenderControl输出html遇到的问题当我直接在后台用GridView gv=new GridView();gv.RenderControl(htmlwrite);没有问题,但是如果我从工具直接拖一个GridView到设计页面,在后台gv.RenderControl(htmlwrite);就会出现Control GridViewTotal of type GridView must be placed inside a f

    2022年7月20日
    16
  • 一个简单的Spring的AOP例子

    一个简单的Spring的AOP例子

    2021年5月10日
    99
  • java初学者Win 10下eclipse的安装教程(超级详细)

    java初学者Win 10下eclipse的安装教程(超级详细)安装的前准备首先查看电脑的位数方法:1.同时按Win键+R键,在打开的运行窗口中输入“dxdiag”,并确定。(Win键就是键盘上显示WINDOWS标志的按键)可以看到系统是64位的,等会要按照位数下载安装适合自己系统的vs下载安装JDK(由于jdk9和eclipse适配现在有问题这里安装jdk8)1.打开Oracle的官网http://www.oracle.com/techne

    2022年5月25日
    34
  • 谈谈唯一约束和唯一索引的关系_唯一约束和主键约束的一个区别是

    谈谈唯一约束和唯一索引的关系_唯一约束和主键约束的一个区别是最近在看数据库相关知识,感觉唯一约束和唯一索引好像有点类似,于是研究了一番,于是就有了这篇文章。概念开始之前,先解释一下约束和索引。约束全称完整性约束,它是关系数据库中的对象,用来存放插入到一个表中一列数据的规则,用来确保数据的准确性和一致性。索引数据库中用的最频繁的操作是数据查询,索引就是为了加速表中数据行的检索而创建的一种分散的数据结构。可以把索引类比成书的目录,有目录…

    2026年2月3日
    3
  • neokylin 系统_kdesk core service

    neokylin 系统_kdesk core service目录结构a) 文件和目录被组织成一个单根倒置的树状结构b) 文件系统从根目录下开始,用”/”表示c) 根文件系统(rootfs):rootfilesystemd) 文件名区分大小写(Windows中的文件系统不区分大小写)e) 以.开头的文件是隐藏文件f) 文件有两类数据i. 元数据:metadata用户描述文件本身的信息,也就是文件属性ii. 数据:data就是文件中存放的内容文件类型a) 蓝色表示目录d开头b) 黄色表示设备文件b开头:块设备c开头..

    2022年8月10日
    8
  • PLSQL连接Oracle数据库时报ORA 12154错误的解决方法

    PLSQL连接Oracle数据库时报ORA 12154错误的解决方法pl/sql连接Oracle时遇到的问题:解决办法:安装后将Oracle安装目录下的文件夹network(包括其中的子文件,其中主要是tnsnames.ora)在pl/sql菜单–“工具-首选项”中如下配置:重启pl/sql即可。原理解释:在程序中连接Oracle数据库的方式与其他常用数据库,如:MySql,SqlServer不同,这些数据库可以通过直接指定IP的方式连接,但是Or…

    2022年7月24日
    50

发表回复

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

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