溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css定位布局的概念是什么”，在日常操作中，相信很多人在css定位布局的概念是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css定位布局的概念是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
css中定位布局指的是元素可以脫離原來的位置，定位到頁面中任意位置的方式；定位布局可以分為靜態定位（static）、絕對定位（absolute）、相對定位（relative）、固定定位（fixed）和粘性定位（sticky）五種定位方式。
本教程操作環境：windows10系統、CSS3&&HTML5版本、Dell G3電腦。
CSS布 局之定位布局 定位布局(Position)指元素可以脫離原來的位置,定位到頁面中的任意位置。
使用 position、left、right、top、bottom，可以改變元素現有位置，譬如讓元素從正常布局流中跳出來，固定在頁面某個位置上。
css中的定位布局，分為靜態(static)，相對(relative)，絕對(absolute)，固定(fixed)，粘滯(sticky)布局
一、position: static;(靜態布局)
HTML元素默認的定位是靜態，默認定位在文檔流中，設置position: static;樣式的元素不會受到left，right，bottom，top的影響。它不會因為任何特殊的定位方法而改變其在正常流中的位置
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h3>position: static;</h3>
<p>使用 position: static; 定位的元素，無特殊定位，遵循正常的文檔流對象:</p>
<div class="static">
該元素使用了 position: static;
</div>
</body>
</html>輸出結果：
二、position: relative;(相對定位)
相對定位是元素相對于其在原來標準流中位置進行移動，通過left，right，bottom，top屬性進行調整
注意點：
設置了相對定位的元素是不脫離文檔流的，也就是說他是區分行內元素/塊級元素/行內塊元素
因為他不脫離文檔流，那我們就可以他添加magin和padding
在同一方向上只能設置一個屬性，即left，right選擇一個屬性設置，設置了top就不能設置bottom
使用場景：
結合絕對定位使用
對元素進行微調
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
h3.pos_left
{
position:relative;
left:-20px;
}
h3.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h3>這是位于正常位置的標題</h3>
<h3 class="pos_left">這個標題相對于其正常位置向左移動</h3>
<h3 class="pos_right">這個標題相對于其正常位置向右移動</h3>
<p>相對定位會按照元素的原始位置對該元素進行移動。</p>
<p>樣式 "left:-20px" 從元素的原始左側位置減去 20 像素。</p>
<p>樣式 "left:20px" 向元素的原始左側位置增加 20 像素。</p>
</body>
</html>輸出結果：
三、position: absolute;(絕對定位)
絕對定位的參考點
默認情況下，無論有位祖先元素，都是以body作為參考點。
但是，當祖先元素中有定位流元素(使用了絕對/相對/固定定位)，那么該元素就是參考點
如果其祖先元素中含有多個定位流元素，則選擇最近的定位流元素作為參考點
注意點
絕對定位的元素是脫離文檔流的
因為他脫離文檔流，那么他就不區分分行內元素/塊級元素/行內塊元素
絕對定位的元素是會忽略其祖先元素的padding
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
h3
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h3>這是一個絕對定位了的標題</h3>
<p>用絕對定位,一個元素可以放在頁面上的任何位置。標題下面放置距離左邊的頁面100 px和距離頁面的頂部150 px的元素。.</p>
</body>
</html>輸出結果：
四、position: fixed;(固定定位)
設置了固定定位的元素是相對于視口定位的，也就是說其不會隨著滾動條的滾動而滾動，他始終處于以一個視口的位置，通過left，right，bottom，top屬性調整其位置
注意點
固定定位的元素是脫離文檔流的
和絕對定位一樣，不區分區分行內元素/塊級元素/行內塊元素
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一個 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>輸出結果：
五、position: sticky;(粘滯定位)
此定位結合了相對定位和固定定位，通過相對定位定位到某一位置，當視口到達此位置時，將其固定住，例如：設置top:50px，那么在sticky元素到達距離相對定位的元素頂部50px的位置時固定，不再向上移動（此時相當于fixed定位）。
注意點
粘滯定位的元素是不脫離文檔流的
設置 position: sticky; 同時給一個（left，right，bottom，top） 之一即可
使用條件
父元素不能overflow:hidden或者overflow:auto屬性。
必須指定top、bottom、left、right4個值之一，否則只會處于相對定位
父元素的高度不能低于sticky元素的高度
sticky元素僅在其父元素內生效
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>嘗試滾動頁面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 屬性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滾動我</p>
<p>來回滾動我</p>
<p>滾動我</p>
<p>來回滾動我</p>
<p>滾動我</p>
<p>來回滾動我</p>
</div>
</body>
</html>輸出結果：
到此，關于“css定位布局的概念是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
