htnl中的遮罩层以及定位方式
$msk.css({
"top":"0", "left":"0",
"position":"fixed", "display":"block",
"width":"100%", "height":"100%",
"background":"white", "zIndex":"500",
"opacity":"0.3", "filter":"Alpha(opacity=30)"
});
1:定位方式:
2:显示方式:
3:显示顺序:zIndex
opacity:(0-1的小数);
0表示完全透明,1表示完全不透明。
eg: opacity:1.0;
filter:alpha(opacity=100); (此方法可以调节兼容性)
一、静态定位:position: static;
静态定位 (static)是浏览器默认设定的定位方式,在这种方式下,每个块元素都新起一行显示,而块元素的间隔、边框等则由具体网页的CSS样式表规则确定。它简单地遵循文档的普通流动。当元素是静态定位时,top和left属性无效。
二、相对定位:position: relative;(重要)
这种定位形式与静态定位非常相似,因为元素会继续遵循文档的普通流动,除非受到其他指令的影响。但是,设置top或者left属性会引起元素相对于它的原始(静态)位置进行偏移。盒子以原来的位置为
基准进行移动, 有四个属性top、bottom、left、right,通过设置具体的属性值,盒子在该 方向上移动一定的距离。相对定位的方式,盒子并未脱离标准流,它对兄弟盒子的定位没有任何影响,就好像该相对定位的元素还在原地一样。
三、绝对定位:position: absolute;(重要)
绝对定位的元素完全跳出页面布局的普通流动,它会相对于它第一个非静态定位的祖先元素而展示。如果没有这样的祖先元素,则相对于整个文档。
使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素(父盒子)”为基准定位,这里的“已经定位”表示的是使用了除了 static方式以外的其他元素定位方式进行定位,如果没有,则以里游览器窗口为基准。绝对定位的盒子脱离了文档流,它的兄弟盒子定位时视其为“不存 在”。
四、固定定位:position: fixed;
固定定位把元素相对于浏览器窗口而定位。设置元素的top和left为0会使它显示在浏览器左上角,它完全忽略浏览器滚动条的拖动,一直会出现在用户的视野。
固定定位(fixed)与绝对定位的方式类似,有一点不同就是固定定位的盒子以浏览器窗口为基准,而不去关心父盒子是否已定位。
htnl中的遮罩层以及定位方式的更多相关文章
- 【转】cocos2d-x中锚点设置及定位方式
http://blog.csdn.net/wayne5ning/article/details/8160506 说在前面:以下是基于cocos2d-2.0-x-2.0.3作的总结 问题 在cocos2 ...
- cocos2d-x中锚点设置及定位方式
问题 在cocos2d演示样例代码HelloCpp中,为什么要将CCMenu设置位置到CCPointZero,即使CCMenu的锚点是在(0.5, 0.5)? 回答 这是由于CCMenu没有使用锚点进 ...
- 在HTML中实现和使用遮罩层
Web页面中使用遮罩层,可防止重复操作,提示loading:也可以模拟弹出模态窗口. 实现思路:一个DIV作为遮罩层,一个DIV显示loading动态GIF图片.在下面的示例代码中,同时展示了如何在i ...
- [C#] (原创)一步一步教你自定义控件——06,MaskLayer(遮罩层)
一.前言 技术没有先进与落后,只有合适与不合适. 本篇的自定义控件是:遮罩层(MaskLayer). 遮罩层对软件的美观与易用性上的提高是很大的,在日常使用过程中也会经常看到各种遮罩层,虽然WinFo ...
- jQuery遮罩层的实现
遮罩层其实就是一个占据整个页面的半透明效果的页面元素,一般用div实现.页面中实现遮罩层,无非就是为了让用户只能操作弹出窗口的内容,而不允许操作弹出窗口外的内容. 在实现时,我使用了两个div,一个遮 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- 遮罩层中的相对定位与绝对定位(Ajax)
前提:公司最近做的一个项目列表,然后点击项目,出现背景遮罩层,弹出的数据框需要异步加载数据数据,让这个数据框居中,搞了两天终于总算达到Boss满意的程度,做了半年C/S,反过来做B/S,顿时感到技术还 ...
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开
https://blog.csdn.net/zgsdzczh/article/details/79744838 web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开 <style typ ...
随机推荐
- MongoDB的索引(四)
创建索引的好处是可以加快查询速度,但是但来的负面影响就是磁盘的开销和降低写入性嫩. 查看评判当前索引构建情况方法: 1. 使用mongostat工具: 查看mongodb运行状态的程序 使用格式:mo ...
- CF570D——Tree Requests
1.题目大意:给你一棵树,每个点有一个字符,然后我们定义1的深度是1,然后1的儿子深度是2... 然后有一个询问,询问以i为根节点的子树,然后深度是k的那层的所有字符,可否组成一个回文串 2.分析:首 ...
- AMD正式公布第七代桌面级APU AM4新接口
导读 本月5日,AMD正式公布了入门级的第七代桌面级APU为Bristol Ridge,在性能和能效方面较上一代产品拥有显著提升.AMD同时确认Zen处理器和新APU(Bristol Ridge)都将 ...
- block 在ARC和非ARC下的不同含义
Block的循环引用 对于非ARC下, 为了防止循环引用, 我们使用__block来修饰在Block中使用的对象: 对于ARC下, 为了防止循环引用, 我们使用__weak来修饰在Block中使用的对 ...
- Sqli-LABS通关笔录-17-审计SQL注入
这个关卡开始好像进入新的知识区了,前面几个是让我们加深对盲注的印象.接下来又是新知识了!皮卡丘,接招吧! 代码是从SQL-libs的第十七关卡扣的. 页面效果如下所示: PHP面完整CODE如下所示: ...
- opencv删除二值图中较小的噪点色块
CvSeq* contour = NULL; double minarea = 100.0; double tmparea = 0.0; CFileDialog dlg(true); if (dlg. ...
- 如何用极路由+OpenWrt+RTL电视棒搭建一台SDR服务器,并隐秘地捕获和传输数据
0×00 前言 近期因为有个从异地捕获无线信号的需求,便尝试着用OpenWrt+公网IP搭建了一台SDR服务器.如果有小伙伴嫌SDR硬件天线看起来太乱.或者电脑没有足够的USB接口也可在局域网搭建SD ...
- sql server 2008笔记
sql server 2008开启远程访问数据库 1.以windows验证模式进入数据库管理器. 第二步:右击sa,选择属性: 在常规选项卡中,重新填写密码和确认密码(改成个好记的).把强制实施密码策 ...
- css position属性
absolute, 屏幕为参照, 但固定在页面上,随页面滚动而动. fixed, 父元素没有指定position属性(或position属性为static时)==>屏幕为参照,固定在屏幕的某个位 ...
- phpcms调用某个栏目下的所有二级栏目
在html中直接这样调用就可以了,subcat中的值为父栏目的catid {loop subcat(93) $r}{/loop} 注意subcat方法的参数,如果只写一个参数,也就是父栏目id,那该父 ...