今天就跟大家聊聊有關(guān)如何在CSS中使用定位,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)專注于黟縣企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開(kāi)發(fā),商城網(wǎng)站制作。黟縣網(wǎng)站建設(shè)公司,為黟縣等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站開(kāi)發(fā),專業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)CSS中定位介紹
position
屬性在英文單詞中表示位置
的意思,在CSS
中主要作用設(shè)置元素的定位。
CSS
中一共有3
種定位如下:
屬性值 | 描述 |
---|---|
fixed | 設(shè)置固定定位。 |
relative | 設(shè)置相對(duì)定位。 |
absolute | 設(shè)置絕對(duì)定位。 |
固定定位實(shí)踐
在實(shí)踐固定定位之前我們先看看代碼結(jié)構(gòu)是什么樣子的呢。
代碼塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位</title> <style> .box{ width: 100px; height: 100px; background-color: red; margin: 0; padding: 0; } div{ width: 200px; height: 200px; background-color:springgreen; margin: 0; padding: 0; } </style> </head> <body> <h2 class="box"></h2> <div></div> </body> </html>
結(jié)果圖
現(xiàn)在筆者將h2
元素設(shè)置為固定定位,看看和上面的結(jié)構(gòu)實(shí)踐有什么區(qū)別,然后我們?cè)诜治鲆恍┕潭ǘㄎ坏奶攸c(diǎn)。
代碼塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位</title> <style> .box{ position:fixed; width: 100px; height: 100px; background-color: red; margin: 0; padding: 0; } div{ width: 200px; height: 200px; background-color:springgreen; margin: 0; padding: 0; } </style> </head> <body> <h2 class="box"></h2> <div></div> </body> </html>
結(jié)果圖
固定定位特點(diǎn)分析如下:
固定定位,它是相對(duì)于瀏覽器窗口進(jìn)行設(shè)置定位,不管頁(yè)面如果滾動(dòng),固定定位的元素位置不會(huì)受到任何影響。
固定定位的元素特點(diǎn):它已經(jīng)脫離了標(biāo)準(zhǔn)文檔流。
固定定位的元素特點(diǎn):它的層級(jí)比標(biāo)準(zhǔn)文檔流的元素要高,所以我們給h2標(biāo)簽設(shè)置了固定定位會(huì)壓蓋到div標(biāo)簽。
固定定位的元素特點(diǎn):h2標(biāo)簽在div標(biāo)簽之上,所以固定定位的元素已經(jīng)不再占用任何空間
相對(duì)定位實(shí)踐
在實(shí)踐相對(duì)定位之前我們先看看代碼結(jié)構(gòu)是什么樣子的呢。
代碼塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位</title> <style> .box{ width: 400px; height: 300px; border: 1px solid darkorange; } .box div{ width: 100px; height: 100px; } .div1{ background-color: red; } .div2{ background-color: slateblue; } .div3{ background-color: springgreen; } </style> </head> <body> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </body> </html>
結(jié)果圖
現(xiàn)在筆者將class
屬性值為.div2
元素設(shè)置為相對(duì)定位,看看和上面的結(jié)構(gòu)實(shí)踐有什么區(qū)別,然后我們?cè)诜治鲆恍┫鄬?duì)定位的特點(diǎn)。
代碼塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位</title> <style> .box{ width: 400px; height: 300px; border: 1px solid darkorange; } .box div{ width: 100px; height: 100px; } .div1{ background-color: red; } .div2{ background-color: slateblue; position: relative; } .div3{ background-color: springgreen; } </style> </head> <body> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </body> </html>
結(jié)果圖
注意:在我們沒(méi)有給相對(duì)定位設(shè)置坐標(biāo)位置,它是不會(huì)有任何移動(dòng)的。
筆者給class
屬性值為div2
元素設(shè)置定位坐標(biāo)實(shí)踐。
代碼塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位</title> <style> .box{ width: 400px; height: 300px; border: 1px solid darkorange; } .box div{ width: 100px; height: 100px; } .div1{ background-color: red; } .div2{ background-color: slateblue; position: relative; left: 50px; top: 50px; } .div3{ background-color: springgreen; } </style> </head> <body> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </body> </html>
結(jié)果圖
相對(duì)定位特點(diǎn)分析如下:
相對(duì)定位的元素它沒(méi)有脫離標(biāo)準(zhǔn)文檔流。
相對(duì)定位的元素如果沒(méi)有設(shè)置坐標(biāo)它會(huì)在原地位置。
相對(duì)定位的元素設(shè)置了坐標(biāo)位置,它會(huì)根據(jù)原來(lái)的位置開(kāi)始計(jì)算移動(dòng)的位置。
相對(duì)定位的元素它比標(biāo)準(zhǔn)文檔流的元素層級(jí)要高,會(huì)覆蓋標(biāo)準(zhǔn)文檔流中的元素。
相對(duì)定位的元素它可以設(shè)置為負(fù)數(shù)。
絕對(duì)定位實(shí)踐
在實(shí)踐絕對(duì)定位之前我們先看看代碼結(jié)構(gòu)是什么樣子的呢。
代碼塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位</title> <style> .box{ width: 400px; height: 300px; border: 1px solid darkorange; } .box div{ width: 100px; height: 100px; } .div1{ background-color: red; } .div2{ background-color: slateblue; } .div3{ background-color: springgreen; } </style> </head> <body> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </body> </html>
結(jié)果圖
現(xiàn)在筆者將class
屬性值為.div2
元素設(shè)置為絕對(duì)定位,看看和上面的結(jié)構(gòu)實(shí)踐有什么區(qū)別,然后我們?cè)诜治鲆恍┙^對(duì)定位的特點(diǎn)。
代碼塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位</title> <style> .box{ width: 400px; height: 300px; border: 1px solid darkorange; } .box div{ width: 100px; height: 100px; } .div1{ background-color: red; } .div2{ background-color: slateblue; position:absolute; } .div3{ background-color: springgreen; } </style> </head> <body> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </body> </html>
結(jié)果圖
注意:絕對(duì)定位已經(jīng)脫離了標(biāo)準(zhǔn)文檔流。
筆者給class
屬性值為div2
元素設(shè)置定位坐標(biāo)實(shí)踐,為了讓讀者有一個(gè)直觀的印象我給最外層的div
元素設(shè)置了居中對(duì)齊。
代碼塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位</title> <style> .box{ width: 400px; height: 300px; border: 1px solid darkorange; margin: 0px auto; } .box div{ width: 100px; height: 100px; } .div1{ background-color: red; } .div2{ background-color: slateblue; position:absolute; left:0px ; } .div3{ background-color: springgreen; } </style> </head> <body> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </body> </html>
結(jié)果圖
注意:絕對(duì)定位元素為什么會(huì)出現(xiàn)在瀏覽器左邊緣呢,絕對(duì)定位移動(dòng)原理:絕對(duì)定位的元素它會(huì)尋找父元素是否有定位,如果有定位它會(huì)根據(jù)父元素進(jìn)行定位,如果父元素沒(méi)有設(shè)置定位,它會(huì)在找父元素的父元素是否有定位,以此類推直到body
元素就停止了,因?yàn)?code>body 元素就是瀏覽器的位置,說(shuō)了這么多筆者給新學(xué)者一個(gè)直觀的印象,那咱們就實(shí)踐見(jiàn)真招。
代碼塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位</title> <style> .box{ width: 400px; height: 300px; border: 1px solid darkorange; margin: 0px auto; position: relative; } .box div{ width: 100px; height: 100px; } .div1{ background-color: red; } .div2{ background-color: slateblue; position:absolute; right:0px ; } .div3{ background-color: springgreen; } </style> </head> <body> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </body> </html>
結(jié)果圖
注意:現(xiàn)在筆者給絕對(duì)定位坐標(biāo)更換成了向右定位,父元素設(shè)置了一個(gè)相對(duì)定位,在這里就不多進(jìn)行實(shí)踐了,如果定位的父元素的父元素也就是爺爺?shù)脑兀冈睾蜖敔斣赝瑫r(shí)都設(shè)置了定位,該元素會(huì)根據(jù)父元素決定定位而不是爺爺元素。
絕對(duì)定位特點(diǎn)分析如下:
絕對(duì)定位元素它已經(jīng)脫離了標(biāo)準(zhǔn)文檔流。
絕對(duì)定位元素它會(huì)覆蓋掉標(biāo)準(zhǔn)文檔流的元素。
絕對(duì)定位元素它已經(jīng)不再占用任何空間了。
絕對(duì)定位元素它根據(jù)父元素之祖先元素之間是否有定位,如果有根據(jù)最近元素進(jìn)行設(shè)置定位的位置,如果沒(méi)有根據(jù)body元素進(jìn)行定位。
絕對(duì)定位元素的父元素可以是用任何定位包括絕對(duì)定位,筆者建議是用相對(duì)定位,一般相對(duì)定位是配合著絕對(duì)定位使用的
看完上述內(nèi)容,你們對(duì)如何在CSS中使用定位有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。
網(wǎng)頁(yè)題目:如何在CSS中使用定位-創(chuàng)新互聯(lián)
URL鏈接:http://muchs.cn/article24/dheije.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、軟件開(kāi)發(fā)、網(wǎng)站維護(hù)、域名注冊(cè)、云服務(wù)器、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容