zoukankan      html  css  js  c++  java
  • CSS position: 一张图搞定absolute和relative

    • 红色表示 absolute块
      • 父容器必须是relative, 否则这些块就以整个网页为参照物
      • 定位和比例都是以参照物(父容器)计算, 比如: 100%指的是父容器的尺寸
      • absolute的体积不计算到父容器中
    • 蓝色表示 relative块
      • 参照物为自身
      • 占位不变(如图: 蓝色div和随后的绿色div之间有空隙, 后者仍用前者定位之前的所占位置计算)
      • 体积计算到父容器中
    • 修正了一个IE6的bug (container要加上 'zoom:1;')
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Layout Example</title>
        <style>
            #divContainer
            
    {
                border: solid red 2px; color: Red;

                position: relative;            
                
    zoom: 1; /*IMPORTANT: IE6 bug fix: force to re-layout*/
            
    }
            
    #divA
            
    {
                width: 400px; height: 100px; background-color: LightGreen; color: Black;
            
    }
            #divB
            
    {
                
    width: 300px; background-color: blue; color: White;

                position: relative;
                left
    : -30px;
                top
    : -10px;
            
    }
            
    #divC
            
    {
                width: 200px; height: 100px; background-color: limegreen; color: White;
            
    }
            #divD
            
    {
                
    width: 200px; color: white; background-color: OrangeRed; padding: 10px;

                position: absolute;
                left
    : 100%;
                top
    : -10px;
            
    }
            #divE
            
    {
                
    width: 200px; background-color: Brown; color: White;

                position: absolute;
                right
    : 10px;
                bottom
    : 10px;
            
    }
            #divF
            
    {
                
    width: 200px; background-color: red; color: white;

                position: absolute;
                right
    : 100%;
                top
    : 250px;
            
    }
            #divG
            
    {
                width: 200px; height: 100px; background-color: green; color: White;
            
    }
        
    </style>
    </head>
    <body>
        Layout example:
        <div style="padding: 300px;">
            <div id="divContainer">
                container (position: relative to make the children's 'absolute' work)

                <div id="divA">content A without any position</div>

                <div id="divB">
                    Content B with relative position. It moves to left and above (according to itself)
                    but its space remains. The height is caculated by its parent.
                    <ol>
                        <li>position: relative (to itself)</li>
                        <li>left: -30px</li>
                        <li>top: -10px</li>
                    </ol>
                </div>

                <div id="divC">content C without any position</div>

                <div id="divD">
                    <div style="margin: 10px; border: solid 1px white">
                        content D with Absolute position. It moves to left and above (according to its parent)
                        and its height won't be calcuated by its parent.
                        <ol>
                            <li>position: absolute</li>
                            <li>left: 100% (to its parent)</li>
                            <li>top: -10px (to its parent)</li>
                        </ol>
                    </div>
                </div>

                <div id="divE">
                    content E with Absolute position, to its parent's bottom right.
                    <ol>
                        <li>position: absolute</li>
                        <li>right: 10px (to its parent)</li>
                        <li>bottom: 10px (to its parent)</li>
                    </ol>
                </div>

                <div id="divF">
                    content F with Absolute position. It moves to right and above (according to its
                    parent) and its height won't be calcuated by its parent.
                    <ol>
                        <li>position: absolute</li>
                        <li>right: 100% (to its parent)</li>
                        <li>top: 250px (to its parent)</li>
                    </ol>
                </div>

                <div id="divG">content G without any position</div>
            </div>
        </div>
    </body>
    </html>
  • 相关阅读:
    P2617 Dynamic Rankings (动态开点权值线段树 + 树状数组)
    2019HDU多校 Round5
    2019牛客多校 Round6
    2019牛客多校 Round5
    2019HDU多校 Round4
    [转]SQLServer : EXEC和sp_executesql的区别
    无法执行 FunctionImport“entitys.xx”,因为未将它映射到存储函数。EF
    【终极解决方案】为应用程序池“XXX”提供服务的进程在与 Windows Process Activation Service 通信时出现严重错误。该进程 ID 为“XXXX”。数据字段包含错误号。
    IE11 Windows7下F12 DOC资源管理器不能用Exception in window.onload: Error: An error has ocurredJSPlugin.3005
    VS2015编译错误:调用的目标发生了异常--->此实现不是Windows平台FLPS验证的加密算法的一部分。
  • 原文地址:https://www.cnblogs.com/mrfangzheng/p/2186315.html
Copyright © 2011-2022 走看看