• 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为负值的时候,向下移动;反之

  • 相关阅读:
    独立使用 ecj
    公司没有 DBA,Mysql 运维自己来
    mysql安装
    常用模块
    基本数据类型
    Incorrect column name 问题解决
    mysql中date和datetime的区别
    python yield用法详解(未完成)
    mysql报错--initialize specified but the data directory has files in it. Aborting.
    python 列表解析式
  • 原文地址:https://www.cnblogs.com/xyishere/p/13966161.html
Copyright © 2020-2023  润新知