【CSS】HTML頁面定位CSS - position 屬性 relative 、absolute、fixed 、sticky

relative 相對定位

absolute 絕對定位?

fixed 固定定位

sticky 粘性定位

position：relative 、absolute、fixed 、sticky （四選一）

top：距離上面的像素

bottom：距離底部的像素

left：距離左邊的像素

right：距離右邊的像素

relative 相對定位

相對于自身在原來默認的位置，進行?top、bottom、left、right 來調整位置

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>
/*    相同的樣式可以寫一起，不要重復操作*/
#div_1,#div_2 { width: 20px;height: 20px;border: 1px solid ;color: white;font-size: 5px;}#div_1{background: black;}#div_2{position: relative;left: 20px;top:30px;background: red;}
</style>
</head>
<body><div id="div_1">我是一個黑框框</div>
<div id="div_2"> 我是一個紅框框</div></body>
</html>

absolute 絕對定位?

沒有已定位的祖先元素，absolute ?相對于瀏覽器頁面進行定位

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>
/*    相同的樣式可以寫一起，不要重復操作*/
#div_1,#div_2 { width: 20px;height: 20px;border: 1px solid ;color: white;font-size: 5px;}#div_1{background: black;}#div_2{position: absolute;left: 20px;top:0px;background: red;}
</style>
</head>
<body><div id="div_1">我是一個黑框框</div>
<div id="div_2"> 我是一個紅框框</div></body>
</html>

定位祖先元素進行定位。div_1 已經做 ?position: absolute，且是 div_1 包含了 div_2 ，所以 div_1就是已經定位的祖先元素

<style>
#div_1{position: absolute;top:10px;background: black;}#div_2{position: absolute;left: 20px;top:10px;background: red;}
</style>
</head>
<body><div id="div_1"> <div id="div_2"> 我是一個紅框框</div>
</div>

fixed 固定定位

fixed 是相對于瀏覽器窗口進行定位的。無論頁面如何滾動，頁面都不會挪動位置

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>.nav {width: 100%;height: 25 px;background-color: blue;color: white;position: fixed;top: 0;left: 0;    }
</style>
</head>
<body><div class="nav">我動不了了導航欄</div>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
</body>
</html>

sticky 粘性定位

元素剛開始就按文檔正常一樣顯示，但是當頁面滾動到指定位置的時候，它就會固定住。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>.nav {width: 100%;height: 25 px;background-color: blue;color: white;position: sticky;top: 50px;}
</style>
</head>
<body>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<div class="nav">我是導航欄</div>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
<p>頁面內容。。。。。。</p>
</body>
</html>

當頁面下拉的時候，就會停留在離頂部 50 像素的位置

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/65992.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/65992.shtml
英文地址，請注明出處：http://en.pswp.cn/web/65992.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！