Vultr搬瓦工vps網站教程國外域名IT資訊

CSS position絕對定位absolute relative

時間:2020-12-26 08:35:20  來源:  作者: 我要糾錯


一、position語法與結構
position語法: 

position : static absolute relative 

position參數:
static :  無特殊定位,對象遵循HTML定位規則
absolute :  將對象從文檔流中拖出,使用left,right,top,bottom等屬性進行絕對定位。而其層疊通過css z-index屬性定義。此時對象不具有邊距,但仍有補白和邊框
relative :  對象不可層疊,但將依據left,right,top,bottom等屬性在正常文檔流中偏移位置

position說明:
設置對象的定位方式,可以讓布局層容易位置絕對定位,控制盒子對象更加準確。

二、絕對定位使用條件
position:absolute;position:relative絕對定位使用通常是父級定義position:relative定位,子級定義position:absolute絕對定位屬性,并且子級使用left或right和top或bottom進行絕對定位。

.divcss5{position:relative} 定義,通常最好再定義CSS寬度和CSS高度
.divcss5-a{position:absolute;left:10px;top:10px} 這里定義了距離父級左側距離間距為10px,距離父級上邊距離為10px

.divcss5-a{position:absolute;right:10px;bottom:10px} 這里定義了距離父級靠右距離10px,距離父級靠下邊距離為10px

 

對應HTML結構
<div class="divcss5">
    <div class="divcss5-a"></div>
</div>

這樣就絕對定位了“divcss5-a”在父級“divcss5”盒子內。

注意的是,left(左)和right(右)在一個對象只能選一種定義,bottom(下)和top(上)也是在一個對象只能選一種定義。

  • 上一篇:如何去掉友情鏈接的<li>標簽的三種方法
  • 下一篇:搜索引擎中intitle的用法例子
  • 無相關信息
    主機資訊

    主機信息
    如何修改帝國CMS的數據庫配置
    如何修改帝國CMS的數據庫配置
    帝國cms關閉投稿不需要的系統模型和欄目
    帝國cms關閉投稿不需要的系統模型和欄目
    帝國cms用戶注冊頁面出現member is close,如何設置呢?
    帝國cms用戶注冊頁面出現member is close,
    帝國CMS 靈動標簽精確調用9級推薦或9級頭條
    帝國CMS 靈動標簽精確調用9級推薦或9級頭條
    帝國cms 調用欄目(去除某個欄目不調用)的方法
    帝國cms 調用欄目(去除某個欄目不調用)的方法
    如何將域名從Namesilo轉出?
    如何將域名從Namesilo轉出?
    阿里云共享型服務器與獨享型服務器的區別及如何選擇?
    阿里云共享型服務器與獨享型服務器的區別及
    帝國cms 后臺,點擊統計沒有顯示,點擊為0如何解決
    帝國cms 后臺,點擊統計沒有顯示,點擊為0如何
    推薦信息

    相關文章

    無相關信息

    欄目更新

    Copyright © 2020 ushost.cn Inc. All Rights Reserved. 美國主機中文網 版權所有
    鄂ICP備06013414號-8
    日韩高清国产一区在线