• CSS -bottom属性理解/详解


    上结论:

    当position为relative时,元素是以它在bottom为0时的位置为参照物进行垂直方向的上下移动;当bottom值为负数,元素向下移动,反之;

    当position为absolute时,元素的移动是以包含它的元素为参照物,以bottom=0的时候进行移动;当bottom值为负数,元素向下移动,反之;


    代码先,首先设置这样一个div块

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8" />
    <title>CSS bottom属性详解-CSS教程</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
    .test{
        position: relative;
        width:200px;
        height:200px;
        padding:5px 10px;
        background:#c00;
        color:#fff;
        line-height:12;
    }
    </style>
    </head>
    <body>
    <div class="test">我是一个test</div>
    </body>
    </html>
            

    先不设置它的bottom属性;打开浏览器一看:

     可以看到它的位置是这样的;加上bottom: 100px;

     可以看到tset块上移了;

    设置bottom为-100px;如图:

     可得出结论:

    当position为relative时,元素是以它在bottom为0时的位置为参照物进行垂直方向的上下移动;当bottom值为负数,元素向下移动,反之;


    下面是position为absolute的实验;

    当position:absolute;不设置bottom值

    设置bottom:0px;

     设置bottom:-100px;

     设置bottom:100px

     可以得出结论:当position为absolute时,元素的移动是以包含它的元素为参照物,以bottom=0的时候进行移动

    当bottom为负值的时候,向下移动;反之

  • 相关阅读:
    redis命令参考(四) set集合
    redis命令参考(三) List列表相关
    redis命令参考(二)
    redis命令参考(一) SortedSet相关
    insert_into_on_dumplicate_key
    laravel深入分析
    开发中GBK+UTF8编码的处理
    ajax封装调用
    linux正则表达式的用法
    linux 如何保证使程序后台运行(nohup &)
  • 原文地址:https://www.cnblogs.com/xyishere/p/13966161.html
Copyright © 2020-2023  润新知