溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css定位布局的概念是什么

發(fā)布時(shí)間：2022-04-20 11:05:22 來源：億速云 閱讀：200 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“css定位布局的概念是什么”，在日常操作中，相信很多人在css定位布局的概念是什么問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css定位布局的概念是什么”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

css中定位布局指的是元素可以脫離原來的位置，定位到頁(yè)面中任意位置的方式；定位布局可以分為靜態(tài)定位（static）、絕對(duì)定位（absolute）、相對(duì)定位（relative）、固定定位（fixed）和粘性定位（sticky）五種定位方式。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。

css定位布局是什么意思

CSS布 局之定位布局 定位布局(Position)指元素可以脫離原來的位置,定位到頁(yè)面中的任意位置。

使用 position、left、right、top、bottom，可以改變?cè)噩F(xiàn)有位置，譬如讓元素從正常布局流中跳出來，固定在頁(yè)面某個(gè)位置上。

css中的定位布局，分為靜態(tài)(static)，相對(duì)(relative)，絕對(duì)(absolute)，固定(fixed)，粘滯(sticky)布局

一、position: static;(靜態(tài)布局)

HTML元素默認(rèn)的定位是靜態(tài)，默認(rèn)定位在文檔流中，設(shè)置position: static;樣式的元素不會(huì)受到left，right，bottom，top的影響。它不會(huì)因?yàn)槿魏翁厥獾亩ㄎ环椒ǘ淖兤湓谡Ａ髦械奈恢?/p>

示例如下：

<!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; 定位的元素，無特殊定位，遵循正常的文檔流對(duì)象:</p>
<div class="static">
該元素使用了 position: static;
</div>
</body>
</html>

輸出結(jié)果：

css定位布局的概念是什么

二、position: relative;(相對(duì)定位)

相對(duì)定位是元素相對(duì)于其在原來標(biāo)準(zhǔn)流中位置進(jìn)行移動(dòng)，通過left，right，bottom，top屬性進(jìn)行調(diào)整

注意點(diǎn)：

  • 設(shè)置了相對(duì)定位的元素是不脫離文檔流的，也就是說他是區(qū)分行內(nèi)元素/塊級(jí)元素/行內(nèi)塊元素

  • 因?yàn)樗幻撾x文檔流，那我們就可以他添加magin和padding

  • 在同一方向上只能設(shè)置一個(gè)屬性，即left，right選擇一個(gè)屬性設(shè)置，設(shè)置了top就不能設(shè)置bottom

使用場(chǎng)景：

  • 結(jié)合絕對(duì)定位使用

  • 對(duì)元素進(jìn)行微調(diào)

示例如下：

<!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>這是位于正常位置的標(biāo)題</h3>
<h3 class="pos_left">這個(gè)標(biāo)題相對(duì)于其正常位置向左移動(dòng)</h3>
<h3 class="pos_right">這個(gè)標(biāo)題相對(duì)于其正常位置向右移動(dòng)</h3>
<p>相對(duì)定位會(huì)按照元素的原始位置對(duì)該元素進(jìn)行移動(dòng)。</p>
<p>樣式 "left:-20px" 從元素的原始左側(cè)位置減去 20 像素。</p>
<p>樣式 "left:20px" 向元素的原始左側(cè)位置增加 20 像素。</p>
</body>
</html>

輸出結(jié)果：

css定位布局的概念是什么

三、position: absolute;(絕對(duì)定位)

絕對(duì)定位的參考點(diǎn)

  • 默認(rèn)情況下，無論有位祖先元素，都是以body作為參考點(diǎn)。

  • 但是，當(dāng)祖先元素中有定位流元素(使用了絕對(duì)/相對(duì)/固定定位)，那么該元素就是參考點(diǎn)

  • 如果其祖先元素中含有多個(gè)定位流元素，則選擇最近的定位流元素作為參考點(diǎn)

注意點(diǎn)

  • 絕對(duì)定位的元素是脫離文檔流的

  • 因?yàn)樗撾x文檔流，那么他就不區(qū)分分行內(nèi)元素/塊級(jí)元素/行內(nèi)塊元素

  • 絕對(duì)定位的元素是會(huì)忽略其祖先元素的padding

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
h3
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h3>這是一個(gè)絕對(duì)定位了的標(biāo)題</h3>
<p>用絕對(duì)定位,一個(gè)元素可以放在頁(yè)面上的任何位置。標(biāo)題下面放置距離左邊的頁(yè)面100 px和距離頁(yè)面的頂部150 px的元素。.</p>
</body>
</html>

輸出結(jié)果：

css定位布局的概念是什么

四、position: fixed;(固定定位)

設(shè)置了固定定位的元素是相對(duì)于視口定位的，也就是說其不會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)，他始終處于以一個(gè)視口的位置，通過left，right，bottom，top屬性調(diào)整其位置

注意點(diǎn)

  • 固定定位的元素是脫離文檔流的

  • 和絕對(duì)定位一樣，不區(qū)分區(qū)分行內(nèi)元素/塊級(jí)元素/行內(nèi)塊元素

示例如下：

<!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 支持只有一個(gè) !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>

輸出結(jié)果：

css定位布局的概念是什么

五、position: sticky;(粘滯定位)

此定位結(jié)合了相對(duì)定位和固定定位，通過相對(duì)定位定位到某一位置，當(dāng)視口到達(dá)此位置時(shí)，將其固定住，例如：設(shè)置top:50px，那么在sticky元素到達(dá)距離相對(duì)定位的元素頂部50px的位置時(shí)固定，不再向上移動(dòng)（此時(shí)相當(dāng)于fixed定位）。

注意點(diǎn)

  • 粘滯定位的元素是不脫離文檔流的

  • 設(shè)置 position: sticky; 同時(shí)給一個(gè)（left，right，bottom，top） 之一即可

使用條件

  • 父元素不能overflow:hidden或者overflow:auto屬性。

  • 必須指定top、bottom、left、right4個(gè)值之一，否則只會(huì)處于相對(duì)定位

  • 父元素的高度不能低于sticky元素的高度

  • sticky元素僅在其父元素內(nèi)生效

示例如下：

<!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>嘗試滾動(dòng)頁(yè)面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 屬性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
  <p>滾動(dòng)我</p>
  <p>來回滾動(dòng)我</p>
  <p>滾動(dòng)我</p>
  <p>來回滾動(dòng)我</p>
  <p>滾動(dòng)我</p>
  <p>來回滾動(dòng)我</p>
</div>
</body>
</html>

輸出結(jié)果：

css定位布局的概念是什么

到此，關(guān)于“css定位布局的概念是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手