zoukankan      html  css  js  c++  java
  • css 定位

    对于(例如元素div1)position:absolute时,是相对于已定位的最近父元素,如果没有已定位的父元素,则相对于初始包含块(html)

    其中这里说的"已定位的父元素"是指position属性为relative,absolute,fixed的元素,如果position的值为static或不存在,则div1则absolute则不相对于该父元素,而是相对于初始包含块。

    在一个一个框包含另一个框中,

    eg:

    <div class="one">

    <div class="two"></div>

    </div> 

    div.two相对于div.one进行定位,

    如果div.two为absolute定位,则不考虑div.one的padding效果。但是会考虑div.two自身的margin效果。

    如果div.two为relative定位,是相对与自身进行定位,要考虑div.one的padding效果。 

    eg:例如

    <style>


    .one
    {
    position:relative;
    margin:auto;
    400px;
    height:400px;
    border:2px solid blue;
    box-sizing:border-box;
    }
    .two
    {
    margin:20px;
    top:0px;
    left:0px;
    position:absolute;
    200px;
    height:200px;
    border:2px solid red;
    }
    </style>

     当.two(position:absolute)中的top:0px left:0px 时既使div.one有padding值,但是div.two还是贴着div.one的左上角。但是div.two有margin值时,要考虑margin的效果,div.two的左上角不在贴着div.one的左上角。

  • 相关阅读:
    Windows Phone 的控件倾斜效果
    在framework4.0 3.5中反序列化 解析JSON
    PhpStorm2.0、3.0,5.0注册码到2112年
    Windows Phone(wp7)系统长按的秘密
    配置ethereal编译环境
    复习C++:引用的一些用法
    转载
    Stay hungry,Stay foolish
    C++:继承的一点注意事项
    纯虚函数
  • 原文地址:https://www.cnblogs.com/feng12345/p/5440981.html
Copyright © 2011-2022 走看看