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