zoukankan      html  css  js  c++  java
  • 绝对定位与相对低位的应用

    <!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 runat="server">
        <title></title>
        <style type="text/css">
        body,ul,div,li
        {
            padding:0px 0px 0px 0px;
            margin:0px 0px 0px 0px;
        }
       
        #container
        {
            300px;
            height:300px;
            background-color:#efefef;
            position:relative;
            border:1px solid #000000;
        }
                  
        #left
        {
            float:left;
            position:absolute;
            border:1px solid #ff0000;
            bottom:23px;
            left:0px;
            right:80px;
        }
       
        #right
        {
            float:right;  
            position:absolute;
            border:1px solid #ff0000;
            right:10px;
            bottom:23px;
        }         
       
        #bottom
        {
            100%;
            height:23px;
            border:1px solid #ff0000;
            bottom:0px;
            position:absolute;
            left:0px;
        }
        .text
        {
            border:1px solid #000000;
            100%;
            margin:2px 2px 2px 2px;
            position:absolute;
            bottom:0px;
        }
       
        /*button 不用绝对地位,在手机浏览器上将会错位*/
        .button
        {
            border:1px solid #000000;margin:2px 2px 2px 2px;
            position:absolute;
            bottom:0px;
            right:0px;
         }
        </style>
    </head>
    <body>
        
         <div id="container">
            <div>
                <div id="left"><input type="text" class="text"/></div>
                <div id="right"><input type="button" value="button" class="button"/></div>
            </div>

            <div id="bottom"></div>
         </div>

    </body>
    </html>

    总结:1. 绝对定位的元素脱离了文档流,所以紧跟其后的元素将不会依次以此元素来布局。2. 相对定位是相对于自己的原始位置(指position为static时,这个元素在文档流中本来的位置)来说的。文档流是从左往右,从上到下。3.absolute是相对于父元素。

     相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。

  • 相关阅读:
    关于stm32的iic为什么不稳定的讨论
    Android NDK 开发:CMake 使用
    比特币相关
    下载Wistia视频
    C#反射调用 异常信息:Ambiguous match found.
    c++ __super关键字
    开源:AspNetCore 应用程序热更新升级工具(全网第一份公开的解决方案)
    Laravel 生产环境部署,phphub5应用部署记录
    嵌入式系统中的几种文件系统的比较和优缺点(CRAMFS JFFS2 YAFFS2 Initrd SquashFS EXT4)【转】
    【MAT-MemoryAnalyzer】MemoryAnalyzer打开hprof文件报错An internal error occurred during: "Parsing heap dump from
  • 原文地址:https://www.cnblogs.com/jackhuclan/p/2351379.html
Copyright © 2011-2022 走看看