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,一经查实,立即删除!

相关文章

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

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

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

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

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月软件设计师考前预测试题及考点解析

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

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

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

gitservergitlab之搭建和使用

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

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

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

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

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

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

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

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

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

灰鸽子病毒手工清除方法

灰鸽子病毒手工清除方法[多图] www.rising.com.cn 2005-2-1 9:50:00 信息源:瑞星公司 作者:刘明星 广告 灰鸽子(Backdoor.Huigezi)作者现在还没有停止对灰鸽子的开发,再加上有些人为了避开杀毒软件的查杀故意给灰鸽子加上各种不同的壳&a…

IOS重力感应

iPhone和iPad设备有4个方向的状态,我们可以针对应用当前所处的方向调整界面。 为了使应用支持不同的方向,首先我们需要在项目设置中设置设备支持的方向(也可以在项目的plist中设置) Portrait  竖放,home键在屏幕下方…

理解CSS3 max/min-content及fit-content等width值

1. CSS2.1的尺寸体系 在CSS2.1的世界中,常见的尺寸分为这几类: 2.1 充分利用可用空间。例如,一些div元素默认宽度100%父元素,这种充分利用可用空间的行为就称为“fill-available”。 2.2 收缩与包裹。典型代表就是浮动&#xf…

Vue中实现数据列表无缝轮播

实现效果: 链接 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>vue.js动态文字滚动公告代码</title><script src"https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js">…

接触VC之四:COM组件模型基础

From: http://daimajishu.iteye.com/blog/1081292 一年又一年&#xff0c;已经又过了一年了。我VC的生涯已经两岁了。可以相当地庆贺一下哟。回顾这一年的学习(唉&#xff0c;还没有工作实践呢。这年头&#xff0c;工作不好找哇。),还学了不少的好东西。其中&#xff0c;最重要…