CSS -bottom屬性理解/詳解

阿新 • • 發佈：2020-11-13

上結論：

當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(飄零霧雨), [email protected], 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為負值的時候，向下移動；反之

CSS -bottom屬性理解/詳解

上結論：當position為relative時，元素是以它在bottom為0時的位置為參照物進行垂直方向的上下移動；當bottom值為負數，元素向下移動，反之；

css浮動屬性float詳解_13.CSS浮動和清除浮動

技術標籤：css浮動屬性float詳解 1.普通流(normal flow) 這個單詞很多人翻譯為文件流，字面翻譯普通流或者標準流都可以。

CSS linear-gradient屬性案例詳解

目錄一、介紹二、使用技巧2.1 方格背景2.2 棋盤效果linear-gradient是3的一個屬性，功能強大，但是因為使用的靈活性，讓沒接觸過的人感覺不好下手，下面來一起學習一下：

Spring框架構造注入type屬性例項詳解

這篇文章主要介紹了Spring框架構造注入type屬性例項詳解,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

package.json各個屬性說明詳解

什麼是Node.js的模組（Module）？在Node.js中，模組是一個庫或框架，也是一個Node.js專案。Node.js專案遵循模組化的架構，當我們建立了一個Node.js專案，意味著建立了一個模組，這個模組的描述檔案，被稱為package.

基於Android FileProvider 屬性配置詳解及FileProvider多節點問題

眾所周知在android7.0，修改了對私有儲存的限制，導致在獲取資源的時候，不能通過Uri.fromFile來獲取uri了我們需要適配7.0+的機型需要這樣寫：

python 靜態方法、類方法、屬性方法詳解

\'\'\'class Dog(object):def __init__(self,name):self.name = name@staticmethod#實際上跟類沒有什麼關係了。eat和類的關係截斷了，只是類下面函式#靜態方法：只是名義上歸類管理，實際上在靜態方法裡訪問不了類或

【轉載】 android 屬性動畫詳解

動畫綜述 Google大大對動畫的總述如下： Animations can add visual cues that notify users about what\'s going on in your app. They are especially useful when the UI changes state, such as when new cont