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

時間 2019-11-17

標籤 position fixed 實現相對元素定位欄目 CSS 简体版

原文原文鏈接

position:fixed 默認是相對瀏覽器窗口定位的，本人無心中瞭解到它還有另外一種用法，可實現相對父級元素定位。但這種用法本人認爲濫用了該屬性，通常不這麼用，極少特殊狀況能夠選擇這麼使用。代碼以下：html

<!DOCTYPE html>瀏覽器

<html>spa

<head>htm

<title></title>io

<style>class

.parent {容器

width: 500px;meta

height: 2500px;樣式

margin: 100px;

background-color: #000000;

}

.fix {

position: fixed;

width: 200px;

height: 200px;

border: 1px solid #1B6D85;

margin: 50px;

}

</style>

</head>

<body>

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

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

</div>

</body>

</html>

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

相關標籤/搜索