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 ...
随机推荐
- scoll滚动
[前端性能]高性能滚动 scroll 及页面渲染优化 最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优 ...
- 破解TexturePacker加密资源
http://blog.csdn.net/ynnmnm/article/details/38392795 最近我们要开一个新项目,UI与交互打算借鉴当前正火的<圣火英雄传>,程序开发为了和 ...
- MySQL 同主机不同数据库之间的复制
MySQL同主机不同数据库的复制命令:注意运行在Terminal中,不运行在MySQL命令行中. mysqldump Portal_DEV -u root -ppassword1 --add-drop ...
- .oi 小游戏
http://agar.io/ http://diep.io/ http://slither.io/ http://splix.io/ http://wilds.io/ http://kingz.io ...
- HDU 1160 DP最长子序列
G - FatMouse's Speed Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64 ...
- Selenium Webdriver元素定位的常用方式
单选框.复选框.文本框和密码框的元素标签都是input,此时单靠tagName无法准确地得到我们想要的元素,需要结合type属性才能过滤出我们要的元素.示例代码如下: public class Sea ...
- Struts2中的OGNL通配符
<action name="*_*" class="action.{1}Action" method="{2}"> 匹配,第一个 ...
- css3创建3D场景
浏览器本身是一个2维平面,对于3D的情况,实际上是增加了一个维度(深度),所以我们需要创建一个3D场景.这时浏览器不仅仅是一个平面了,更像是一个窗口,我们透过这个窗口去观察里面的三维世界.所谓的创建3 ...
- 利用闪回查看Oracle表历史时刻数据
利用闪回查看Oracle表历史时刻数据 1.查看表历史时刻数据 select * from tab_test AS OF TIMESTAMP to_timestamp('20140917 10:00: ...
- poj3341
AC自动机,用40^4 * 50 * 10的空间进行dp. 最大的难点在于hash. hash一个数列f,数列中的每一位都有一个上限g,即f[i]<=g[i]. 那么可以将该数列hash为这样一 ...