zoukankan      html  css  js  c++  java
  • 前端编程提高之旅(十二)----position置入值应用

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



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

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


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

       一、声明置入值得情形

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

       以下看一个样例:

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

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


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

       二、未声明置入值情形

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

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



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

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

       三、置入值应用

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

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

        例如以下图:


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

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

    .search-area-container {
                display:block;
                position:absolute;
                left:0;
                right:0;
                top:0;
                bottom:0;
                background-color:transparent;
                z-index:1100;
            }

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



       菜单条延伸究竟部代码:

    /*设置菜单条默认隐藏,并向下延伸究竟部*/
         #search-area{
                position:fixed;
                left:-60%;
                top:43px;
                bottom:0;
                60%;
                z-index:1111;
                color: #fff;
                background-color: #418cd5;
                text-shadow:none;
                border:none;
                border-radius:0;
            }

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

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



  • 相关阅读:
    java简单实现MD5加密
    Java用freemarker导出Word 文档
    java 反射(*)
    java解析XML
    JDBC程序实例
    web前端开发-博客目录
    虚拟主机配置
    WAMP运行原理
    WAMP配置
    web前端性能优化总结
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/5177236.html
Copyright © 2011-2022 走看看