css相對定位如何使用

發(fā)布時間：2023-01-05 10:20:36 來源：億速云閱讀：156 作者：iii 欄目：開發(fā)技術(shù)

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

一.如何將一個元素設(shè)置為相對定位

當(dāng)一個對象的position屬性值被設(shè)置為relative的時候就會發(fā)生相對定位:

position:relative

二.定位參考對象

可以使用top屬性和left屬性設(shè)置相對定位對象的偏移量。
相對定位的偏移參考對象是此對象本身。

首先看一個沒有使用定位的代碼實例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>CSS相對定位-螞蟻部落</title>  
<style type="text/css">  
.father{  
 width:400px;  
 height:400px;  
 background-color:green;  
 margin:50px;  
}  
.first{  
 width:100px;  
 height:100px;  
 background-color:red  
}  
.second{  
 width:100px;  
 height:100px;  
 background-color:blue  
}  
</style>  
</head>  
<body>  
<div class="father">  
 <div class="first"></div>  
 <div class="second"></div>  
</div>  
</body>  
</html>

在以上代碼中，所有的對象都沒有采用相對定位，這里無須多介紹了。

再來看一段采用相對定位的代碼:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>CSS相對定位</title>  
<style type="text/css">  
.father{  
 width:400px;  
 height:400px;  
 background-color:green;  
 margin:50px;  
}  
.first{  
 width:100px;  
 height:100px;  
 background-color:red;  
 position:relative;  
 left:20px;  
 top:30px;  
}  
.second{  
 width:100px;  
 height:100px;  
 background-color:blue  
}  
</style>  
</head>  
<body>  
<div class="father">  
 <div class="first"></div>  
 <div class="second"></div>  
</div>  
</body>  
</html>

css的全稱是什么

css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。

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

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

css相對定位如何使用

css的全稱是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽