Question

考虑到我的目标是现代桌面和移动浏览器，使用以下哪个css规则有什么实际区别吗？有没有隐藏的警告？

.modal-1{
   position:fixed;
   top:0; 
   right:0; 
   bottom:0; 
   left:0;
}

.modal-2{
   position:fixed;
   width:100%;
   height:100%;
}

.modal-3{
   position:fixed;
   min-width:100%;
   min-height:100%;
}

还有一个子问题：如果一切都相同，除了position:absolute;，当我想在另一个（相对或绝对定位的）div而不是body中创建一个模态div时，该怎么办？那么css规则有什么不同吗？

Answer 1

根据您与div：

一起使用的类

使用modal-1似乎根本不会添加任何边距，并且由于其性质而完全响应。

modal-2和modal-3继承了Firefox中的父边距，但不是在Chrome中，body { margin: 0 0 0 0; }修复了它（在我的测试用例body中是父元素。）

使用top, right, bottom, left似乎是最安全的选择，我认为它最适合@media (min-width:***px)查询，以帮助安排固定容器中的图层。

至于你的子问题，任何子元素（子模态）应该最好使用position: relative并使用top, left, width and height设置自己。如果遇到麻烦，你也可以操纵overflow。

我希望能回答你的问题。

Answer 2

您的主要集装箱潜水应该有位置：相对，如果您想要全屏宽度：100％和高度：100％带显示屏：阻止......

对于父母内部的位置子div，他们应该有绝对位置

全宽/高度div css细节

2 个答案: