zoukankan      html  css  js  c++  java
  • css position absolute相对于父元素的设置方式

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元

    大家知道css的position absolute默认是根据document来设置的,比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角。

     

    有时候我们需要在父元素的容器内设置相对的绝对位置

    要做到这一点需要把父元素的position属性设置为relative,设置为relative之后不设置left和top属性,这时候父元素虽然是relative的,但是还是在原来位置。 然后把子元素的位置position设置为absolute的,并设置其left,top,right,bottom属性,这样就是相对于父元素的绝对位置了。

    如下html示例代码:

    <!doctype html>
    <html>
        <style type="text/css">
        #father {
           position: relative;
           width:600px;
           margin:auto;
           height:400px;
           border:1px solid red;
        }
    
        #son1 {
           position: absolute;
           top: 0;
           background:#f0f0f0;
        }
    
        #son2 {
           position: absolute;
           bottom: 0;
           background:blue;
        }
        </style>
        <body>
        <div id="father">
            <div id="son1">I am son1</div>
            <div id="son2">I am son2</div>
        </div>
        </body>
    </html>
  • 相关阅读:
    修改 dll
    SQLServer中char、varchar、nchar、nvarchar的区别:
    关于破解的一点心得
    asp.net 操作XML
    jquery autocomplete
    【转】height,posHeight和pixelHeight区别
    异常处理 Access to the path is denied
    asp.net 获得客户端 mac 地址
    cmd 跟踪路由
    Excel 宏
  • 原文地址:https://www.cnblogs.com/cowboybusy/p/10531103.html
Copyright © 2011-2022 走看看