当我试图把我的头缠在固定和绝对的位置上时，我遇到了这个奇怪的情况，我很不理解。固定的孩子尽管和绝对的孩子有相同的大小，但大小仍然不同？为什么会发生这种情况？固定的父母和绝对的父母在大小上也是相同的。
import React from "react";
const App = () => {
return (
<div className="maincontainer w-full h-screen">
<div className=" fixexparent fixed w-[50%] h-[50%] bg-emerald-200 right-0 bottom-0">
<div className=" fixedchild fixed w-[20%] h-[20%] bg-yellow-200 "></div>
</div>
<div className="child absolute bg-blue-200 w-[50%] h-[50%]">
<div className="anotherchild absolute bg-rose-200 w-[20%] h-[20%] bottom-0 right-0 "></div>
</div>
</div>
);
};
export default App
1条答案
按热度按时间4xrmg8kj1#
简单来说，
固定：相对于视口定位。
绝对值：相对于其最近的祖先元素定位。
说明：
当页面滚动时，固定元素相对于视区保持不变。由于视区大小可能与其固定父元素的大小不同，因此具有
20%width和height的固定子元素与该大小相关。然而，在这个示例中，绝对子元素是相对于其绝对父元素定位的，绝对父元素比主容器大
50%。因此，绝对子元素的大小（比主容器宽20%，比主容器高20%）是相对于其绝对父元素的大小。