溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下css中absolute怎么使用的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
1、absolute
生成絕對定位的元素，相對于static定位以外的第一個父元素進(jìn)行定位。元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。
代碼示例：
<!DOCTYPEhtml>
<html>
<metacharset="utf-8">
<title>absolute使用示例</title>
<head>
<style>
h4.abs
{
position:absolute;
left:50px;
top:50px
}
</style>
</head>
<body>
<h4class="abs">絕對定位（absolute）</h4>
<p>通過絕對定位，元素可以放置到頁面上的任何位置。本例中下面元素距離頁面左側(cè)和頂部都是50px。</p>
</body>
</html>
2、fixed
生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。
代碼示例：
<!DOCTYPEhtml>
<html>
<metacharset="utf-8">
<title>fixed使用示例</title>
<head>
<style>
p.a1
{
position:fixed;
left:10px;
top:10px;
}
p.a2
{
position:fixed;
top:50px;
right:50px;
}
</style>
</head>
<body>
<pclass="a1">fixed示例：此段元素相對于瀏覽器窗口，距離頂部10px，距離左邊10px;</p>
<pclass="a2">fixed示例：此段元素相對于瀏覽器窗口，距離頂部50px，距離右邊50px;</p>
</body>
</html>
3、relative
生成相對定位的元素，相對于其正常位置進(jìn)行定位。因此，"left:20"會向元素的LEFT位置添加20像素。
代碼使用示例：
<!DOCTYPEhtml>
<html>
<metacharset="utf-8">
<title>relative</title>
<head>
<style>
h4.le
{
position:relative;
left:-30px
}
h4.ri
{
position:relative;
left:40px
}
</style>
</head>
<body>
<h4>正常位置的元素</h4>
<h4class="le">這個元素相對于其正常位置向左移動</h4>
<h4class="ri">這個元素相對于其正常位置向右移動</h4>
<p>相對定位會按照元素的原始位置對該元素進(jìn)行移動。</p>
<p>本例中"left:-30px"，從元素的原始左側(cè)位置減去30像素。</p>
<p>本例中"left:40px"，向元素的原始左側(cè)位置增加40像素。</p>
</body>
</html>
以上就是“css中absolute怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
