javascript - 关于div内部元素使用position:fixed之后的背景区域问题。

Question

<p class="p1" style="width: 400px;height:300px;">
    <img src="1.jpg">
    <p class="p2" style="position: fixed;left:0;top:0;width:100%;height100%;background:blue;display:none;">文字加配音</p>
</p>

当我点击p1时，我让p2显示，结果是类似这样的：

可以看到，我为p2设置了fixed全屏显示，并且宽高为100%，但我想要的是点击p1，显示的时候p2本身就是铺满屏幕的，而非从宽400高300突然跳到100%。

我怀疑是子元素position：fixed之后，如果将它显示，会有一个从父元素宽度背景到body背景的渲染时间，所以在渲染一开始显示背景区域是按照父p的宽度显示。

不知这样猜测是否正确..

如果我的p2一定要在p1中，有什么办法可以解决这样的问题？

Answer 1

谢邀！
你这个提问有问题，我按你的代码，根本无法重现bug，就算是从父元素到body的的过渡，那一开始也有400*300的大小，还有你的p2里的样式也不好好写，我觉得提问者应该把问题描述清楚，而不是让回答者去揣摩你的问题。

Answer 2

设置了position: fixed;的元素，其定位是相对于窗口的！.p1设置为position: relative;或者position: absolute; .p2改position: fixed;为position: absolute;

Answer 3

.p1{position:relative}
.p2{position:absolute;left:0;top:0;bottom:0;right:0}

这样子不好吗?为什么要用fixed?

Answer 4

谢邀。我没有看出你的问题。你这样写是为了dom节点好找吗？