css的position怎么使用

這篇文章主要介紹了css的position怎么使用的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇css的position怎么使用文章都會有所收獲，下面我們一起來看看吧。

為邢臺等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及邢臺網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、邢臺網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

position

我們都知道元素都擁有 position 這個 css 屬性，先來看看他的基本定義和可用值。

定義

position 決定了元素位置是如何被渲染的

可用值

static: 默認(rèn)值，元素在文檔流中依次渲染

absolute: 元素位置相對于其最近的非 static 的父元素

fixed: 元素位置相對于瀏覽器窗口

relative: 元素位置相對于原本應(yīng)該渲染的位置

sticky: 根據(jù)滾動的位置在 relative 和 fixed 之間切換

initial: 設(shè)置為默認(rèn)值

inherit: 從父元素繼承

基本用法

<body>

<p>This is a paragraph!</p>

</section>

</body>

body {

background: beige;

}

section {

display: block;

width: 400px;

height: 160px;

background: lightgray;

}

p {

width: 50%; /* == 400px * .5 = 200px */

height: 25%; /* == 160px * .25 = 40px */

margin: 5%; /* == 400px * .05 = 20px */

padding: 5%; /* == 400px * .05 = 20px */

background: cyan;

}

很好，與我們期望的一樣渲染出來了?，F(xiàn)在我們把 section 的 display 屬性換成 inline

section {

display: inline;

width: 400px;

height: 160px;

background: lightgray;

}

這個破壞真是立竿見影啊，為什么會這樣呢？要知曉其中的奧秘，就要了解什么是內(nèi)容塊。

內(nèi)容塊

定義

通常情況下，元素的大小和位置都取決他的內(nèi)容塊。一般地，內(nèi)容塊是該元素最近的塊級父元素，但有一些例外情況。

為什么內(nèi)容塊很重要

元素的大小和位置都是由其內(nèi)容塊做為參考的，他會影響到元素的 width, height, padding, margin 還有 offset 相關(guān)的屬性。

如何找到元素對應(yīng)的內(nèi)容塊

position 是 static 或者 relative 時，其內(nèi)容塊是其最近的塊級父元素的內(nèi)容框(content-box)，比如 block, inline-block, list-item，或者是被指定為某種格式容器的元素，比如 table, flex, grid。

position 是 absolute 時，其內(nèi)容塊是其最近的 position 不是 static 的塊級父元素的填充框（padding-box）。

position 是 fixed 時，其內(nèi)容塊是整個視圖窗口（viewport）

position 是 absolute 或者 fixed 時，其內(nèi)容塊也可能是有下列特殊情況的最近的父元素的填充框（padding-box）。

transform 或者 perspective 被設(shè)置過或?qū)⒈辉O(shè)置不為 none。

filter 被設(shè)置或?qū)⒈辉O(shè)置不為 none。

從內(nèi)容塊計(jì)算百分比

height, top 和 bottom 依據(jù)內(nèi)容塊的 height 值進(jìn)行百分比計(jì)算。如果內(nèi)容塊是 static 或者 relative，并且沒有設(shè)置高度，依靠其內(nèi)容決定高度，那么這些值都會變成 0。

width, left, right, padding, margin 依據(jù)內(nèi)容塊的 width 值進(jìn)行百分比計(jì)算。

例子解釋

現(xiàn)在我們了解了內(nèi)容快的概念之后，再來看看上面的例子，p 最近的父元素是 section, 被設(shè)置為 inline 之后不再是塊級元素，所以 body 變成了離 p 最近的塊級父元素，此時內(nèi)部的百分比計(jì)算都依據(jù) body 的寬高做對應(yīng)計(jì)算。

absolute的用例

我們再看看別的例子

現(xiàn)在我們將第一個例子中的 p 的 position 設(shè)置為 absolute, section 從 inline 改回 block,

body {

background: beige;

}

section {

display: block;

width: 400px;

height: 160px;

background: lightgray;

}

p {

position: absolute;

width: 50%; /* == 瀏覽器寬度的50% */

height: 25%; /* == 瀏覽器高度的25% */

margin: 5%; /* == 瀏覽器寬度的5% */

padding: 5%; /* == 瀏覽器寬度的5% */

background: cyan;

}

由于 p 設(shè)置為了 absolute, 顯而易見他的大小尺寸都根據(jù)了瀏覽器窗口來計(jì)算，注意這里也經(jīng)歷了尋找內(nèi)容塊的過程。p 的祖先元素均是 static，所以瀏覽器窗口才成為了其內(nèi)容塊。

現(xiàn)在我們還不錯，一切都在掌握之中，我們試著把 section 的 transform 設(shè)置為 rotate(0deg)，旋轉(zhuǎn)了 0 度，可以預(yù)計(jì)到本來應(yīng)該沒有視覺上的效果，但這么做會影響對內(nèi)容塊的決定，從而導(dǎo)致 p 的大小和位置變化。

section {

transform: rotate(0deg);

width: 400px;

height: 160px;

background: lightgray;

}

p {

position: absolute;

...

}

看！由于我們?yōu)?section 設(shè)置了 transform，p 的內(nèi)容塊不再是瀏覽器窗口了，而是 section。

關(guān)于“css的position怎么使用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“css的position怎么使用”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標(biāo)題：css的position怎么使用
地址分享：http://jinyejixie.com/article18/pgegdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、服務(wù)器托管、網(wǎng)站制作、全網(wǎng)營銷推廣、網(wǎng)站建設(shè)、網(wǎng)站收錄

聲明：本網(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)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

css的position怎么使用