css定位布局的概念是什么
這篇文章主要介紹“css定位布局的概念是什么”，在日常操作中，相信很多人在css定位布局的概念是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css定位布局的概念是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
站在用戶的角度思考問題，與客戶深入溝通，找到邵武網(wǎng)站設(shè)計與邵武網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站制作、網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋邵武地區(qū)。
css中定位布局指的是元素可以脫離原來的位置，定位到頁面中任意位置的方式；定位布局可以分為靜態(tài)定位（static）、絕對定位（absolute）、相對定位（relative）、固定定位（fixed）和粘性定位（sticky）五種定位方式。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。
css定位布局是什么意思
CSS布 局之定位布局 定位布局(Position)指元素可以脫離原來的位置,定位到頁面中的任意位置。
使用 position、left、right、top、bottom，可以改變元素現(xiàn)有位置，譬如讓元素從正常布局流中跳出來，固定在頁面某個位置上。
css中的定位布局，分為靜態(tài)(static)，相對(relative)，絕對(absolute)，固定(fixed)，粘滯(sticky)布局
一、position: static;(靜態(tài)布局)
HTML元素默認(rèn)的定位是靜態(tài)，默認(rèn)定位在文檔流中，設(shè)置position: static;樣式的元素不會受到left，right，bottom，top的影響。它不會因為任何特殊的定位方法而改變其在正常流中的位置
示例如下：
123
position: static;
使用 position: static; 定位的元素，無特殊定位，遵循正常的文檔流對象:
該元素使用了 position: static;
輸出結(jié)果：
二、position: relative;(相對定位)
相對定位是元素相對于其在原來標(biāo)準(zhǔn)流中位置進(jìn)行移動，通過left，right，bottom，top屬性進(jìn)行調(diào)整
注意點：
設(shè)置了相對定位的元素是不脫離文檔流的，也就是說他是區(qū)分行內(nèi)元素/塊級元素/行內(nèi)塊元素
因為他不脫離文檔流，那我們就可以他添加magin和padding
在同一方向上只能設(shè)置一個屬性，即left，right選擇一個屬性設(shè)置，設(shè)置了top就不能設(shè)置bottom
使用場景：
結(jié)合絕對定位使用
對元素進(jìn)行微調(diào)
示例如下：
123
這是位于正常位置的標(biāo)題
這個標(biāo)題相對于其正常位置向左移動
這個標(biāo)題相對于其正常位置向右移動
相對定位會按照元素的原始位置對該元素進(jìn)行移動。
樣式 "left:-20px" 從元素的原始左側(cè)位置減去 20 像素。
樣式 "left:20px" 向元素的原始左側(cè)位置增加 20 像素。
輸出結(jié)果：
三、position: absolute;(絕對定位)
絕對定位的參考點
默認(rèn)情況下，無論有位祖先元素，都是以body作為參考點。
但是，當(dāng)祖先元素中有定位流元素(使用了絕對/相對/固定定位)，那么該元素就是參考點
如果其祖先元素中含有多個定位流元素，則選擇最近的定位流元素作為參考點
注意點
示例如下：
123
這是一個絕對定位了的標(biāo)題
用絕對定位,一個元素可以放在頁面上的任何位置。標(biāo)題下面放置距離左邊的頁面100 px和距離頁面的頂部150 px的元素。.
輸出結(jié)果：
四、position: fixed;(固定定位)
設(shè)置了固定定位的元素是相對于視口定位的，也就是說其不會隨著滾動條的滾動而滾動，他始終處于以一個視口的位置，通過left，right，bottom，top屬性調(diào)整其位置
注意點
示例如下：
123
Some more text
注意: IE7 和 IE8 支持只有一個 !DOCTYPE 指定固定值.
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
輸出結(jié)果：
五、position: sticky;(粘滯定位)
此定位結(jié)合了相對定位和固定定位，通過相對定位定位到某一位置，當(dāng)視口到達(dá)此位置時，將其固定住，例如：設(shè)置top:50px，那么在sticky元素到達(dá)距離相對定位的元素頂部50px的位置時固定，不再向上移動（此時相當(dāng)于fixed定位）。
注意點
使用條件
示例如下：
123
嘗試滾動頁面。
注意: IE/Edge 15 及更早 IE 版本不支持 sticky 屬性。
我是粘性定位!
重慶分公司
重慶分公司
