欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css中position屬性如何使用？-創(chuàng)新互聯(lián)

css中position屬性如何使用？對于學習前端開發(fā)的朋友來說，css中的position屬性是至關重要的。簡單的說，css中position的意思就是，規(guī)定元素的定位類型。

十載專注成都網站制作，成都企業(yè)網站定制，個人網站制作服務，為大家分享網站制作知識、方案，網站設計流程、步驟,成功服務上千家企業(yè)。為您提供網站建設,網站制作,網頁設計及定制高端網站建設服務,專注于成都企業(yè)網站定制,高端網頁制作,對玻璃隔斷等多個行業(yè)，擁有豐富的營銷推廣經驗。

1、absolute

生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。

代碼示例：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>absolute使用示例</title>
<head>
    <style>
        h5.abs
        {
            position:absolute;
            left:50px;
            top:50px
        }
 </style>
</head>
<body>
<h5 class="abs">絕對定位（absolute）</h5>
<p>通過絕對定位，元素可以放置到頁面上的任何位置。本例中下面元素距離頁面左側和頂部都是50px。</p>
</body>
</html>

代碼效果如下圖：

css中position屬性如何使用？

2、fixed

生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。

代碼示例：


<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>fixed使用示例</title>
<head>
    <style>
        p.a1
        {
            position:fixed;
            left:10px;
            top:10px;
        }
        p.a2
        {
            position:fixed;
            top:50px;
            right:50px;
        }
 </style>
</head>
<body>
<p class="a1">fixed示例：此段元素相對于瀏覽器窗口，距離頂部10px，距離左邊10px;</p>
<p class="a2">fixed示例：此段元素相對于瀏覽器窗口，距離頂部50px，距離右邊50px;</p>
</body>
</html>

代碼效果如下圖：

css中position屬性如何使用？

3、relative

生成相對定位的元素，相對于其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。

代碼使用示例：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>relative</title>
<head>
    <style>
        h5.le
        {
            position:relative;
            left:-30px
        }
        h5.ri
        {
            position:relative;
            left:40px
        }
 </style>
</head>
<body>
<h5>正常位置的元素</h5>
<h5 class="le">這個元素相對于其正常位置向左移動</h5>
<h5 class="ri">這個元素相對于其正常位置向右移動</h5>
<p>相對定位會按照元素的原始位置對該元素進行移動。</p>
<p>本例中"left:-30px"，從元素的原始左側位置減去 30 像素。</p>
<p>本例中"left:40px"，向元素的原始左側位置增加 40 像素。</p>

</body>
</html>

效果如下圖：

css中position屬性如何使用？

4、static

默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

5、inherit

規(guī)定應該從父元素繼承 position 屬性的值。

以上就是css中position屬性如何使用的簡略介紹，當然詳細使用上面的不同還得要大家自己使用過才領會。如果想了解更多，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道哦！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞標題：css中position屬性如何使用？-創(chuàng)新互聯(lián)
新聞來源：http://chinadenli.net/article12/dgjsdc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供外貿網站建設、網站策劃、網站建設、服務器托管、品牌網站建設、定制開發(fā)

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都網頁設計公司