首页 > 技术文章 > position:fixed 实现相对父级元素定位?

alice-fee 2017-11-15 14:41 原文

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

推荐阅读