CSS 相对|绝对(relative/absolute)定位系列(二)

1. 因为事先标准就已经在文字的后面显示,设置absolute之后因为跟随性仍然是在原来的文字,然后再设置margin实现定位即可

这里写图片描述

这里写图片描述

2. absolute正业之元素隐藏

元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的,如果您只是使用display:none与display:block/inline来实现DOM元素的显隐控制,那你就out了。就元素的显示与隐藏实现,使用display在有些时候算是比较糟糕的方法了

absolute属性相关的隐藏方法,我知道的有三种,分别如下

这里写图片描述

使用absolute属性控制DOM元素的显隐有三个关键点:页面可用性,回流与渲染,配合JavaScript的控制

2.1 可用性隐藏

所谓可用性隐藏,就是兼顾屏幕阅读器这类互联网阅读辅助设备的隐藏方式。Yahoo! 可用性实验室成员Ted Drake就不同隐藏方法下屏幕阅读器的可用性问题作为测试,结果发现下面两种隐藏方式屏幕阅读器是读不了的

这里写图片描述

所以,从可用性角度而言,像“选项卡内容”,“更多收起展开”这类元素隐藏与显示就不推荐使用display:none, 或者是position:absolute + visibility:hidden

例如优酷网电影或视频的简介中“显示详情”的实现就是使用的display:none,如下截图

这里写图片描述

而大众点评网的隐藏层多采用position:absolute + visibility:hidden的方法,如下截图

这里写图片描述

上述隐藏内容其实都是有用的信息,对于像盲人这类需要借助屏幕阅读器的用户无法知道这些信息了。拿优酷的那个例子,盲人用户就无法知道影片完整的简介

如果希望隐藏内容能够被辅助阅读设备识别,就不能使用display:none以及visibility:hidden隐藏元素。可以使用模拟隐藏的隐藏方法,又称可用性隐藏。就是下面两种隐藏方法

这里写图片描述

2.2 配合JavaScript的控制

说到元素的显示与隐藏,免不了与JavaScript的交互。例如display相关的隐藏于显示,就是display:block/inline/inline-block/…与display:none

要让元素隐藏,很简单,直接:

这里写图片描述

但是,如果要显示隐藏的元素,咋办呢?因为不同的标签所处的display水平是不一样的,于是,我们很难有一个简单的统一的显示方法。例如,下面的代码可能使用于div, p标签,但是对于span等inline水平的元素,可能就会嗝屁了(原本单行显示结果换行)

这里写图片描述

而使用绝对定位实现的一些元素隐藏方法的控制就相对简单很多的。例如:position:absolute + visibility:hidden方法,当我们要让元素(原本非绝对定位元素)显示的时候,我们需要设置

这里写图片描述

而类似的position:absolute + top:-999em方法,当我们要让元素(原本非绝对定位元素)显示的时候,我们只需要设置

这里写图片描述

而无需担心原本标签的是inline水平还是block水平。所以,就显隐的JavaScript控制上来讲,absolute相关方法要比display略胜一筹

注意:控制元素显示与隐藏才是absolute属性的正业所在

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/406961.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

7天后自动更新cookie

原生js操作cookie 6s后cookie自动删除 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><meta http-equiv&…

js中replace的用法

replace方法的语法是&#xff1a;stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)&#xff0c;reExp可以是正则表达式对象(RegExp)也可以是字符串(string)&#xff0c;replaceText是替代查找到的字符串。。为了帮助大家更好的理解&#xff0c;下面举个简…

ospf 单区域配置

在骨干区域(eare0)中:配置方法:router ospf 进程号如:10network 加 你想宣告的网段 反向子网掩码 area 加id 号假如是在路由器的接口ip 是 192.168.1.1 和192.168.2.1 在area 0 中 router ospf 10network 192.168.1.0 0.0.0.255 area 0network 192.168.2.0 0.0.0.255 area 0就可…

javascript学习系列(25):数组中的substr

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说s…

CSS 相对|绝对(relative/absolute)定位系列(三)

1. absolute与等高布局 拿简单的两栏布局举例&#xff0c;左栏与右栏有不同的背景色&#xff0c;且中间隔边框线分隔&#xff0c;如何实现&#xff1f;因为随着内容的不同&#xff0c;有可能左侧栏高度较高&#xff0c;也有可能是右侧栏高度较高。所以&#xff0c;要实现无缝的…

CPUID详解[增加TLB与Cache]

From: http://bbs.pediy.com/showthread.php?threadid21646 标 题:CPUID详解[增加TLB与Cache]作 者: Pr0Zel 时 间: 2006-02-21,22:00:23 链 接: http://bbs.pediy.com/showthread.php?t21646 这是文章最后一次更新,加入了TLB与Cache信息等资料前言:论坛上面有人不明白CPUID指…

2009年5月软件设计师考前预测试题及考点解析

更多试题及要点解析请参见《软件设计师考试考前冲刺预测试卷及考点解析》、《应试捷径--典型考题解析与考点贯通(系统分析师考试)》&#xff0c;不断更新中&#xff0c;敬请持续关注&#xff01;

纯CSS实现侧边栏/分栏高度自动相等

一、为何要分栏高度一致&#xff1f; 分栏高度一致的目的是更加美观。举两个例子吧 2.1 对于分栏布局&#xff0c;我们或许会用边框(border)进行分隔&#xff0c;就如鄙人博客的分栏 此时最担心的问题就是高度不一致&#xff0c;尤其是无边框属性的分栏高度超过有边框属性的分…

论调用约定__stdcall,__cdecl,__fastcall,thiscall,naked call

From: http://blog.vckbase.com/arong/archive/2004/06/09/409.aspx 在C语言中&#xff0c;假设我们有这样的一个函数&#xff1a; int function(int a,int b) 调用时只要用result function(1,2)这样的方式就可以使用这个函数。但是&#xff0c;当高级语言被编译成计算机可以…

gitservergitlab之搭建和使用

gitserver比較有名的是gitosis和gitolite&#xff0c;这两个管理和使用起来略微有些复杂&#xff0c;没有web页面&#xff0c;而gitlab则是类似于github的一个工具&#xff0c;github无法免费建立私有仓库&#xff0c;而且为了代码安全&#xff0c;于是在内网安装了一个自己实验…

菜鸟学习javascript实例教程

1、用JS显示文字的例子&#xff1a; <html> <body> <script type"text/javascript"> document.write("Hello World!") </script> </body> </html> 2、用HTML标签来格式化文本的例子&#xff1a; <html> <bod…

推荐!国外程序员整理的 C++ 资源大全(转载)

关于 C 框架、库和资源的一些汇总列表&#xff0c;由 fffaraz 发起和维护。 内容包括&#xff1a;标准库、Web应用框架、人工智能、数据库、图片处理、机器学习、日志、代码分析等。 标准库 C标准库&#xff0c;包括了STL容器&#xff0c;算法和函数等。 C Standard Library&am…

CSS布局奇淫巧计之-强大的负边距

负的边距好像能减小元素在文档流中的尺寸一样&#xff0c;但事实上&#xff0c;它的尺寸大小并没变&#xff0c;只是文档流在计算元素位置的时候&#xff0c;会认为负边距把元素的尺寸减小了&#xff0c;因此位置也就发生变化了。 实例&#xff1a; 因为P为block元素且没有指定…

格式化网上复制过来的源代码

背景&#xff1a; 当我们从网上复制一些源代码到本机的时候&#xff0c;一定会带上一些非常规字符(特殊字符)&#xff0c;为了让源代码更规范&#xff0c;我们一般需要作一些处理&#xff1a; 1. 将连续的多个空格、制表符压缩成一个 2. 删除行尾多余的空格或制表符 3. 将每…

[NHibernate] NHibernate对象关系映射工具了解

NHibernate是把Java的Hibernate核心部分移植到Microsoft .NET Framework上。它是一个对象关系映射工具&#xff0c;其目标是把.NET对象持久化到关系数据库。 NHibernate 是一个面向.NET 环境的对象/关系数据库映射工具。对象关系映射(O/R Mapping&#xff0c;Object Relational…

获取硬盘总容量,柱面数,磁道数,扇区数

下面的代码来自MSDN #include <stdio.h> #include <windows.h> #include <winioctl.h>BOOL GetDriveGeometry(DISK_GEOMETRY *pdg) {HANDLE hDevice; // handle to the drive to be examined BOOL bResult; // results flagD…

改变CSS世界纵横规则的writing-mode属性

1. writing-mode的原本作用 和float属性有些类似&#xff0c;writing-mode原本设计的是控制内联元素的显示的&#xff08;即所谓的文本布局-Text Layout&#xff09;。因为在亚洲&#xff0c;尤其像中国这样的东亚国家&#xff0c;存在文字的排版不是水平式的&#xff0c;而是…

IOS中定时器NSTimer的开启与关闭

调用一次计时器方法&#xff1a; [cpp] view plaincopymyTimer [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:selector(scrollTimer) userInfo:nil repeats:NO]; //不重复&#xff0c;只调用一次。timer运行一次就会自动停止运行 重复调用计时器方法&…