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>
  • 相关阅读:
    小w的喜糖(candy)
    亚瑟王(arthur)
    Bajtman i Okrągły Robin
    Bajtman i Okrągły Robin
    网络流模板
    网络流模板
    觉醒力量 (hidpower)
    觉醒力量 (hidpower)
    E-card
    E-card
  • 原文地址:https://www.cnblogs.com/cowboybusy/p/10531103.html
Copyright © 2011-2022 走看看