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还是相对于浏览器窗口的固定位置不动的。