zoukankan      html  css  js  c++  java
  • html定位position(固定,相对(relative),绝对(absolute))

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
    <!--         position
            属性值:
            相对定位(relative)
                              left right top bottom 
                    1.使用相对定位后,不会脱离文档流。也就不会影响其他元素的位置
                    2.只是用相对定位,不使用以下left等四个值是不会进行偏移的
                    如何使用相对定位:如
                    position:relative;
                    left:100px;
                    top:100px;
            绝对定位(absolute)
                    1.使用绝对定位后,脱离文档流
                    2.使内联元素支持宽高,如span
                    3.使块元素的宽度跟随内容决定(让块标签具有内联的一些特性)
                    4.父元素没有定位元素,而子元素有定位元素,那么子元素的偏移是按照整个文档流进行的,而不是按照盒子进行的,给父元素设置定位后,则解决这个问题(固定定位,相对定位,绝对定位)
             -->        
            <style>
                #Position_01{
                     100px;
                    height: 100px;
                    background-color: #0000FF;
                }
                #Position_02{
                     100px;
                    height: 100px;
                    background-color: red;
                    position: relative;/* 相对定位 */
                    left: 100px;
                    top: 100px;
                }
                #Position_03{
                     100px;
                    height: 100px;
                    background-color: #000000;
                    color: #FF0000;
                    position: absolute;
                }
                #Positon_04{
                     200px;
                    height: 200px;
                    border: 2px solid #0000FF;
                    position: relative;
                    
                }
                #Position_05{
                     100px;
                    height: 100px;
                    background-color: #000000;
                    /* position: absolute; *//* 脱离文档流,下面盒子上来 */
                }
                #Position_06{
                    background-color: #FB8303;
                    position: absolute;该盒子不设置宽高,设置绝对定位后,使块元素具有内联作用(宽度根据内容决定)
                    
                    
                }
                span{
                     100px;
                    height: 100px;
                    background-color: #0000FF;
                    position: absolute;/* 内联标签占宽高 */
                    bottom: 150px;
                }
                #Position_07{
                     100px;
                    height: 100px;
                    background-color:  antiquewhite;
                    position: absolute;
                    left: 100px;
                    top: 100px;
                }
            </style>
        </head>
        <body>
    <!--     #相对定位
            <div id="Position_01">1</div>
            <div id="Position_02">2</div>
            <div id="Position_03">3</div> -->
            <div id="Positon_04">
                <div id="Position_05">2</div>
                <div id="Position_06">3</div>
                <div id="Position_07">4</div>
            </div>
            <span>111</span>
        </body>
    </html>
  • 相关阅读:
    caffe解析
    分布式内存文件系统Tachyon
    用友微服务事务一致性实践
    这样的单点登录才最有效果,很多大咖牛人都不知道!
    基于开发者中心DevOps流水线快速上云
    用友云服务治理平台 助力企业微服务架构落地
    玩事业务中台构建之路
    数字澳洋背后的用友云混合云架构支撑
    企业互联网应用高性能解决之道
    iUAP云运维平台v3.0全面支持基于K8s的微服务架构
  • 原文地址:https://www.cnblogs.com/wsx123/p/15796135.html
Copyright © 2011-2022 走看看