这次内推项目用到的遮罩及其页面下方button都涉及一个概念position置入值得概念。效果图例如以下:



一个元素position属性不是默认值static。那么该元素被称为定位元素。

定位的元素生成定位框,其定位基于四个特性(置入值):'top','right','bottom','left'。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluZ3lpbGVkaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

如今的问题在于当置入值在声明与否起什么作用。

   一、声明置入值得情形

   其置入值的參照物即为近期的申明了"position"为"absolute\relative\fixed的祖先元素。这是通常的情形。

   以下看一个样例:

  1. <div style=" width:500px; height:500px; background:#000; margin-left:200px;"><div style="position:absolute; left:200px; margin-left:100px; background:#F00; width:50px; height:50px;"></div></div>

当设置置入值为0时。此时内部div位置例如以下图:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluZ3lpbGVkaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

    此时可验证上述有置入值时,结论正确。这里内部div參照物为body元素。

   二、未声明置入值情形

    假设绝对定位元素没有申明置入值,仅仅申明了position:absolute,其自身定位以及margin的參照物即为其近期的块级、单元格(table cell)或者行内块(inline-block)祖先元素的内容框。

   依旧是上述样例,将置入值取消掉,看效果如图:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluZ3lpbGVkaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluZ3lpbGVkaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

    此时没有设置置入值。内部div參照物是上层div,即第一个块级元素。

    通过以上两个样例,我们知道有置入值和没有设置置入值是有差别的,差别在于当没有设置置入值时,浏览器会默认给定置入值为auto。

   三、置入值应用

    由最上面置入值的示意图可知,每一个置入值都是相对于參照物距离来定位定位元素的。那么就有一个很有趣的情形。

乐帝设置一个将上述内层div宽度和高度去掉,并设置四个置入值都为0。依照上述理论。那么这个div将会參照body填充满整个body。

    例如以下图:



   上述这个特性经常使用于设置遮罩。当然此时遮罩层颜色不能这么花。

比如这次项目中用到的遮罩代码:

  1. .search-area-container {
  2. display:block;
  3. position:absolute;
  4. left:0;
  5. right:0;
  6. top:0;
  7. bottom:0;
  8. background-color:transparent;
  9. z-index:1100;
  10. }

这里设置的颜色为透明色。效果图例如以下:





   菜单条延伸究竟部代码:

  1. /*设置菜单条默认隐藏,并向下延伸究竟部*/
  2. #search-area{
  3. position:fixed;
  4. left:-60%;
  5. top:43px;
  6. bottom:0;
  7. width:60%;
  8. z-index:1111;
  9. color: #fff;
  10. background-color: #418cd5;
  11. text-shadow:none;
  12. border:none;
  13. border-radius:0;
  14. }

职位详情页底部button栏延伸到三个方向代码:

  1. /*延伸到左右下,设置内容居中,加入一些阴影效果*/
  2. .btn-wrap {
  3. position: fixed;
  4. bottom: 0;
  5. left: 0;
  6. right: 0;
  7. text-align: center;
  8. background-color: #f0f0f0;
  9. box-shadow: 0 -1px 2px #aaa;
  10. }



前端编程提高之旅(十二)----position置入值应用的更多相关文章

  1. 前端编程提高之旅(十)----表单验证插件与cookie插件

        实际项目开发中与用户交互的常见手法就是採用表单的形式.取得用户注冊.登录等信息.而当用户注冊或登录后又须要记住用户的登录状态.这就涉及到经常使用的两个操作:表单验证与cookie增删查找.   ...

  2. 前端编程提高之旅(三)----浏览器兼容之IE6

    在爱奇艺实习期间,乐帝主要负责移动端活动页面的制作,因为移动浏览器是随着智能手机兴起的,这就决定了移动端不会重蹈浏览器兼容问题的覆辙.一開始就比較好的支持web标准,而纵观整个互联网行业,移动web开 ...

  3. 前端编程提高之旅(五)----写给大家看的css书

       自实习也有几个月的时间了,以爱奇艺实习为敲门砖.进入了眼下这家公司.假设说当初能进爱奇艺是暂时袭击DIV+CSS的话,眼下在这家公司体验到.不论什么技术都必须悉知原理,这样才干做到庖丁解牛.做一 ...

  4. 前端编程提高之旅(六)----backbone实现todoMVC

                乐帝当年学习backbone时.最開始是看官网todoMVC的实现.后来了解到requireJS便于管理JS代码.就对官网代码做了requireJS管理.但此时乐帝感觉此时的t ...

  5. 《Linux命令行与shell脚本编程大全》 第二十二章 学习笔记

    第二十二章:使用其他shell 什么是dash shell Debian的dash shell是ash shell的直系后代,ash shell是Unix系统上原来地Bourne shell的简化版本 ...

  6. 前端开发中SEO的十二条总结

    一. 合理使用title, description, keywords二. 合理使用h1 - h6, h1标签的权重很高, 注意使用频率三. 列表代码使用ul, 重要文字使用strong标签四. 图片 ...

  7. java提高篇(十二)-----equals()

    equals() 超类Object中有这个equals()方法,该方法主要用于比较两个对象是否相等.该方法的源码如下: public boolean equals(Object obj) { retu ...

  8. 《Linux命令行与shell脚本编程大全》第二十二章 gawk进阶

    gawk是一门功能丰富的编程语言,你可以通过它所提供的各种特性来编写好几程序处理数据. 22.1 使用变量 gawk编程语言支持两种不同类型的变量: 内建变量和自定义变量 22.1.1 内建变量 ga ...

  9. 前端笔记之JavaScript(十二)缓冲公式&检测设备&Data日期

    一.JavaScript缓冲公式ease 原生JS没有自己的缓冲公式,但是你要自己推理的话,必须要懂一些数学和物理公式: 让div用100毫秒(帧),从left100px的位置变化到left800px ...

随机推荐

  1. dede内链怎么优化,Dedecms内部链接优化技巧

    dede内链怎么优化,dedecms内部链接优化技巧 使用dedecms的过程中发现,可以通过dedecms的文档关键词维护功能.发表文章时候的关键词添加功能(也可以自动获取)以及核心设置里面的是否使 ...

  2. [agc015c]nuske vs phantom thnook

    题意: 有一个n*m的网格图,每个格子是蓝色或白色.四相邻的两个格子连一条边,保证蓝格子构成一个森林. 有q组询问,每次询问给出一个矩形,问矩形内蓝格子组成的联通块个数. $1\leq n,m\leq ...

  3. 大O时间复杂度

    大O表示法指出了在最糟情况下的运行时间.比较操作数,指出了算法运行时间的增速 常见的大O运行时间 O(logn):也叫对数时间,包括二分查找 O(n):也叫线性时间,包括简单查找 O(nlogn):包 ...

  4. 【BZOJ 1059】[ZJOI2007]矩阵游戏

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 最后要求对于所有的i,a[i][i]=1 那么,如果第i行的第j列为1. 就说明我们可以把这个第i行换到第j行. 因为这样的话,a[ ...

  5. MD5 加密原理(转)

    MD5的全称是Message-Digest Algorithm 5(信息-摘要算法),在90年代初由MIT Laboratory for Computer Science和RSA Data Secur ...

  6. [Transducer] Lazyness in Transduer

    Transducers remove the requirement of being lazy to optimize for things like take(10). However, it c ...

  7. Java实现二叉树的创建、递归/非递归遍历

    近期复习数据结构中的二叉树的相关问题,在这里整理一下 这里包含: 1.二叉树的先序创建 2.二叉树的递归先序遍历 3.二叉树的非递归先序遍历 4.二叉树的递归中序遍历 5.二叉树的非递归中序遍历 6. ...

  8. video : Write and Submit your first Linux kernel Patch

    http://v.youku.com/v_show/id_XNDMwNzc3MTI4.html After working with Linux (mostly as an advanced user ...

  9. 浅谈 trie树 及事实上现

    定义:又称字典树,单词查找树或者前缀树,是一种用于高速检索的多叉树结构. 如英文字母的字典树是一个26叉树,数字的字典树是一个10叉树. 核心思想:是空间换时间.利用字符串的公共前缀来减少查询时间的开 ...

  10. RISC设计原则及基本技术

    CISC的特点: 指令系统庞大,指令功能复杂,指令寻址方式多,指令格式多 绝大多数指令须要多个机器周期完毕 各种指令都能够訪问存储器 採用微程序控制 有专用寄存器,少量 难以用优化编译技术生成高效的目 ...