css定位布局的概念是什么

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

站在用戶的角度思考問題，與客戶深入溝通，找到邵武網(wǎng)站設(shè)計與邵武網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(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的影響。它不會因?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; 定位的元素，無特殊定位，遵循正常的文檔流對象:</p>
<div class="static">
該元素使用了 position: static;
</div>
</body>
</html>

輸出結(jié)果：

css定位布局的概念是什么

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

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

注意點(diǎn)：

設(shè)置了相對定位的元素是不脫離文檔流的，也就是說他是區(qū)分行內(nèi)元素/塊級元素/行內(nèi)塊元素
因?yàn)樗幻撾x文檔流，那我們就可以他添加magin和padding
在同一方向上只能設(shè)置一個屬性，即left，right選擇一個屬性設(shè)置，設(shè)置了top就不能設(shè)置bottom

使用場景：

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

輸出結(jié)果：

css定位布局的概念是什么

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

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

默認(rèn)情況下，無論有位祖先元素，都是以body作為參考點(diǎn)。
但是，當(dāng)祖先元素中有定位流元素(使用了絕對/相對/固定定位)，那么該元素就是參考點(diǎn)
如果其祖先元素中含有多個定位流元素，則選擇最近的定位流元素作為參考點(diǎn)

注意點(diǎn)

絕對定位的元素是脫離文檔流的
因?yàn)樗撾x文檔流，那么他就不區(qū)分分行內(nèi)元素/塊級元素/行內(nèi)塊元素
絕對定位的元素是會忽略其祖先元素的padding

示例如下：

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

輸出結(jié)果：

css定位布局的概念是什么

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

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

注意點(diǎn)

固定定位的元素是脫離文檔流的
和絕對定位一樣，不區(qū)分區(qū)分行內(nèi)元素/塊級元素/行內(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 支持只有一個 !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é)合了相對定位和固定定位，通過相對定位定位到某一位置，當(dāng)視口到達(dá)此位置時，將其固定住，例如：設(shè)置top:50px，那么在sticky元素到達(dá)距離相對定位的元素頂部50px的位置時固定，不再向上移動（此時相當(dāng)于fixed定位）。

注意點(diǎn)

粘滯定位的元素是不脫離文檔流的
設(shè)置 position: sticky; 同時給一個（left，right，bottom，top）之一即可

使用條件

父元素不能overflow:hidden或者overflow:auto屬性。
必須指定top、bottom、left、right4個值之一，否則只會處于相對定位
父元素的高度不能低于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>嘗試滾動頁面。</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>

輸出結(jié)果：

css定位布局的概念是什么

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

本文題目：css定位布局的概念是什么
本文來源：http://muchs.cn/article42/ihschc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站設(shè)計公司、品牌網(wǎng)站建設(shè)、網(wǎng)站營銷、網(wǎng)站內(nèi)鏈、外貿(mào)建站

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

猜你還喜歡下面的內(nèi)容