position:fixed 實現相對父級元素定位?


position:fixed 默認是相對瀏覽器窗口定位的,本人無意中了解到它還有另一種用法,可實現相對父級元素定位。但這種用法本人認為濫用了該屬性,一般不這么用,極少特殊情況可以選擇這么使用。代碼如下:

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

.parent {

width: 500px;

height: 2500px;

margin: 100px;

background-color: #000000;

}

.fix {

position: fixed;

width: 200px;

height: 200px;

border: 1px solid #1B6D85;

margin: 50px;

}

</style>

</head>

<body>

<div class="parent">

<h3>position:fixed 默認是相對瀏覽器窗口定位的,怎么實現相對父級元素定位呀?</h3>

<div class="fix">

fixed定位相對父級容器定位,不添加:top,bottom,left,right樣式,通過margin定位

</div>

</div>

</body>

</html>

 

div.fix是相對於div.parent偏移,但頁面滾動的時候div.fix仍是相對於瀏覽器窗口的固定位置不動的。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM