CSS中怎么使用定位
今天小編給大家分享一下CSS中怎么使用定位的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
隴南網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,隴南網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為隴南1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個(gè)售后服務(wù)好的隴南做網(wǎng)站的公司定做！
CSS中定位介紹
position屬性在英文單詞中表示位置的意思，在CSS中主要作用設(shè)置元素的定位。
CSS中一共有3種定位如下：
| 屬性值 | 描述 |
|---|---|
| fixed | 設(shè)置固定定位。 |
| relative | 設(shè)置相對定位。 |
| absolute | 設(shè)置絕對定位。 |
固定定位實(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ū)別，然后我們在分析一些固定定位的特點(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)分析如下：
固定定位，它是相對于瀏覽器窗口進(jìn)行設(shè)置定位，不管頁面如果滾動，固定定位的元素位置不會受到任何影響。
固定定位的元素特點(diǎn)：它已經(jīng)脫離了標(biāo)準(zhǔn)文檔流。
固定定位的元素特點(diǎn)：它的層級比標(biāo)準(zhǔn)文檔流的元素要高，所以我們給h2標(biāo)簽設(shè)置了固定定位會壓蓋到div標(biāo)簽。
固定定位的元素特點(diǎn)：h2標(biāo)簽在div標(biāo)簽之上，所以固定定位的元素已經(jīng)不再占用任何空間。
相對定位實(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: 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è)置為相對定位，看看和上面的結(jié)構(gòu)實(shí)踐有什么區(qū)別，然后我們在分析一些相對定位的特點(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é)果圖
注意：在我們沒有給相對定位設(shè)置坐標(biāo)位置，它是不會有任何移動的。
筆者給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é)果圖
相對定位特點(diǎn)分析如下：
相對定位的元素它沒有脫離標(biāo)準(zhǔn)文檔流。
相對定位的元素如果沒有設(shè)置坐標(biāo)它會在原地位置。
相對定位的元素設(shè)置了坐標(biāo)位置，它會根據(jù)原來的位置開始計(jì)算移動的位置。
相對定位的元素它比標(biāo)準(zhǔn)文檔流的元素層級要高，會覆蓋標(biāo)準(zhǔn)文檔流中的元素。
相對定位的元素它可以設(shè)置為負(fù)數(shù)。
絕對定位實(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: 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è)置為絕對定位，看看和上面的結(jié)構(gòu)實(shí)踐有什么區(qū)別，然后我們在分析一些絕對定位的特點(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é)果圖
注意：絕對定位已經(jīng)脫離了標(biāo)準(zhǔn)文檔流。
筆者給class屬性值為div2元素設(shè)置定位坐標(biāo)實(shí)踐，為了讓讀者有一個(gè)直觀的印象我給最外層的div元素設(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;
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é)果圖
注意：絕對定位元素為什么會出現(xiàn)在瀏覽器左邊緣呢，絕對定位移動原理：絕對定位的元素它會尋找父元素是否有定位，如果有定位它會根據(jù)父元素進(jìn)行定位，如果父元素沒有設(shè)置定位，它會在找父元素的父元素是否有定位，以此類推直到body元素就停止了，因?yàn)閎ody元素就是瀏覽器的位置，說了這么多筆者給新學(xué)者一個(gè)直觀的印象，那咱們就實(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;
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)在筆者給絕對定位坐標(biāo)更換成了向右定位，父元素設(shè)置了一個(gè)相對定位，在這里就不多進(jìn)行實(shí)踐了，如果定位的父元素的父元素也就是爺爺?shù)脑兀冈睾蜖敔斣赝瑫r(shí)都設(shè)置了定位，該元素會根據(jù)父元素決定定位而不是爺爺元素。
絕對定位特點(diǎn)分析如下：
絕對定位元素它已經(jīng)脫離了標(biāo)準(zhǔn)文檔流。
絕對定位元素它會覆蓋掉標(biāo)準(zhǔn)文檔流的元素。
絕對定位元素它已經(jīng)不再占用任何空間了。
絕對定位元素它根據(jù)父元素之祖先元素之間是否有定位，如果有根據(jù)最近元素進(jìn)行設(shè)置定位的位置，如果沒有根據(jù)body元素進(jìn)行定位。
絕對定位元素的父元素可以是用任何定位包括絕對定位，筆者建議是用相對定位，一般相對定位是配合著絕對定位使用的。
以上就是“CSS中怎么使用定位”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)頁題目：CSS中怎么使用定位
鏈接分享：http://www.chinadenli.net/article18/pighdp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、建站公司、Google、企業(yè)網(wǎng)站制作、企業(yè)建站、小程序開發(fā)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 移動APP設(shè)計(jì)需要遵循的五大基本原則 2022-08-11
- 網(wǎng)站APP設(shè)計(jì)師如何規(guī)避字體版權(quán) 2021-06-05
- 手機(jī)APP設(shè)計(jì)制作定律（一） 2016-11-04
- 移動時(shí)代的APP設(shè)計(jì)應(yīng)注意哪些問題？ 2017-01-24
- 怎樣讓你的APP設(shè)計(jì)更具有吸引力？ 2016-08-16
- 網(wǎng)頁APP設(shè)計(jì)與用戶體驗(yàn)中的同情心與同理心 2021-06-01
- APP設(shè)計(jì)之--導(dǎo)航 2022-06-22
- 移動APP設(shè)計(jì)趨勢：神奇的微互動 2015-12-03
- APP設(shè)計(jì)怎樣才能符合人體工程學(xué)？ 2016-08-09
- APP設(shè)計(jì)常見的交互樣式有哪些 2021-05-25
- 移動APP設(shè)計(jì)中不可犯的錯誤 2022-08-21
- 手機(jī)app設(shè)計(jì)需要注意什么問題？ 2021-05-09