首頁 > 開發者 > CSS

css中position中的relative和absolute

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

之前老弄不明白，只能憑藉一點短期內“虐出來的經驗”製作需要的效果，後來仔細研究了一下Hutia的XScroller，並且仔細看了文檔，才知道這個position屬性其實是指本體對上級的定位。如果這麼理解，就好辦了。

預設的屬性值都是static，靜態。就不用多說了。最關鍵的是

relative（相對）以及absolute（絕對）。

往往我們如果是COPY別人的代碼，會把absolute屬性與left、top配合起來製作相關的“懸浮層”效果。然而有時候我們需要針對某一個容器的懸浮效果，而不是針對視窗的。這時候通過高度、寬度的計算不但麻煩，而且幾乎無法完美實現效果。我一開始也無能為力，後來發現只要把其上一級的樣式屬性 position設定為relative就可以了。

也就是說，position的屬性值的效果，直接受其容器樣式中position屬性值影響。

例如如下A-B的嵌套結構

<div id="A">

 <div id="B">

 </div>

</div>

當A的position為relative時，B的position為absolute才有效。這時候left:0、top:0就不再針對視窗文檔，而是針對id為A的這個div了。

這樣在開發一些基於B/S應用程式的時候，就能很方便的添加一些UI元素，例如某一個活動層的關閉按鈕等。

測試代碼如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Untitled Page</title>

    <style>

 

  .Menu{

  width:900px;

}

 

.Menu a{

  display:inline;width:100px;vertical-align:middle; text-align:center;display:block; float:left;z-index:9999;

}

.MenuBar{

  height:20px;background-color:blue; width:500px;position: relative;top:20px;z-index:-1;left:0px;width:900px;

}

.Menu a:hover{

    background-color:Red;verflow:hidden;height:40px; z-index:9999;

   

}

</style>

</head>

<body>

    <center>

        <div style="width: 900px; height: 40px; position: relative">

            <div class="Menu" style="height: 20px;">

                <a href="http://www.my400800.cn">400電話</a> <a href="http://www.my400800.cn/400YeWuJianJie.aspx">400電話簡介</a> <a href="http://www.my400800.cn/400ZiFeiBiaoZhun.aspx">400電話資費</a> <a href="http://www.my400800.cn/400DianHuaShenQingLiuChengJiGaiNian.html">400電話申請流程</a> <a href="http://www.my400800.cn/LianXiWoMen.html">聯絡我們</a>

            </div>

            <div class="MenuBar" style="position: absolute">

            </div>

        </div>

        <div style="width: 900px;">

            本文內容測試

        </div>

    </center>

</body>

</html>

顯示效果如下：

400電話
400電話簡介
400電話資費
400電話申請
聯絡我們

本文內容測試

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css position center of screen absolute and relative path in unix what absolute path and relative path time relative filestream position find position root relative
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More