transform父元素对fixed子元素的影响

最新推荐文章于 2024-05-02 18:59:18 发布

Jayant89

最新推荐文章于 2024-05-02 18:59:18 发布

阅读量1.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Jayant89/article/details/84311273

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在应用了属性transform的父元素上，若其拥有fixed属性的子元素，则该子元素的fixed属性讲失效，并将以其父元素为定位基准

详情请看例子：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style>
	.outer {
	  overflow: hidden;
	  width: 300px;
	  height: 300px;
	  background: yellow;
	}
	.mid {
	  margin: 20px;
	  width: 200px;
	  height: 200px;
	  transform: translate(0, 0);
	  background: greenyellow;
	}
	.inner {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100px;
	  height: 100px;
	  background: pink;
	}
</style>
<body>
	<div class="outer">
  		<div class="mid">
    		<div class="inner"></div>
  		</div>
	</div>
</body>
</html>

以上代码，所呈现的布局样式为：

若我们删除去父元素的transform属性：

代码为：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style>
	.outer {
	  overflow: hidden;
	  width: 300px;
	  height: 300px;
	  background: yellow;
	}
	.mid {
	  margin: 20px;
	  width: 200px;
	  height: 200px;
	  background: greenyellow;
	}
	.inner {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100px;
	  height: 100px;
	  background: pink;
	}
</style>
<body>
	<div class="outer">
  		<div class="mid">
    		<div class="inner"></div>
  		</div>
	</div>
</body>
</html>

则此时的布局样式将变为：

由此可见，其父元素的transform对fixed子元素的影响；

注，此实例在chorme以及firefox下有效，IE环境等不受影响

Jayant89

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
transform父元素对fixed子元素的影响

在应用了属性transform的父元素上，若其拥有fixed属性的子元素，则该子元素的fixed属性讲失效，并将以其父元素为定位基准详情请看例子：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;style&gt; .outer { over
复制链接

扫一扫

专栏目录