Question

div {
    position: absolute;
}

.header {
    width:100%;
    margin-top: 5%;
}

.content {
    width:100%;
    margin-top: 15%;
}

浏览了许多关于布局和浏览器大小调整的问题，但我似乎无法得到它。是否使用％而不是px使我的标题和内容div重叠，因为我缩小了窗口宽度？但是，窗口高度调整不会导致重叠。

Answer 1

与@Josh Crozier相关，该元素与父母相关。当您的浏览器是主要父级时，它将改变其子级。除非你想要一点一点地准确定位所有内容，否则你应该避免使用绝对定位，除非你必须这样做。尝试制作100％宽度的对象，但不是绝对的，因此它们遵循正常流程。然后为您的内容嵌套一个元素，以便您可以单独定位，然后在其中定位内容。

<div class="outer_element">
     <div class="inner_element">
         <div class="relative_element">
             <h2 class="absolute_element">I am a title for things</h2>
         </div>
     </div>
</div>

然后设置外部和内部的样式。一个用于响应浏览器宽度，另一个用于响应文档大小。

outer_element: { width:100%; }
inner_element: { max-width: 1140px; width: 1140px; margin:0 auto;}
relative_element: { position:relative; }
absolute_element: { position: absolute; top:x% or px; left:x% or px; }

这只是一种方法，但希望它能帮助你理解我想传达的东西。如果没有，请告诉我。

Answer 2

我猜测当你缩小宽度时，它会导致标题的内容换行。由于您没有为标题指定显式高度，因此其高度将根据需要增长以适合其内容。因此，如果标题内容包装，它将变得更高，并且一旦它超过任何父元素的高度的15％具有显式高度，它将重叠内容。

如果您只是希望标题和内容根据需要调整大小，但保持彼此的相对位置，那么您可以删除绝对定位。在这种情况下，当内容包装时标题高度增加，内容div将根据需要向下移动。

Answer 3

您有两个选项，可以使用百分比值%，但请记住在CSS中设置此html, body{ height:100%; }，在下面的示例中，您会看到图片2500px {{1}但它的高度为1500px，它在此

中正常工作

JS Fiddle 1

30%

html, body{ height:100%; }
img{ height:30%; }

因为我们为<img src="//placehold.it/2500x1500/00aa00/ffffff?text=sample image">和height标记设置了html，而在此

JS fiddle 2

body

img{ height:30%; }

即使<img src="//placehold.it/2500x1500/00aa00/ffffff?text=sample image"> css未发生变化，它也不会占用30%高度，这是因为未定义img和html高度。< / p>

另一种具有响应宽度和高度的方法是分别使用视口单元^（1），body和vw作为宽度和高度。在这里，您无需为父级或vh和height指定html值，并且它可以正常工作^{（2）

功能}

JS Fiddle 3

body

img{ height:30vh; }

----------------------------------------------- --------------------------------

^（1） MDN - CSS: Viewport percentage lengths。
（2）Caniuse - viewport units。

Answer 4

这里的问题是你正在使用margin-top: 5%;。

这个百分比是相对于你的宽度，而不是你的身高！因此，每当您更改可用宽度时，您的保证金都会发生变化。

使用例如。基于px或em的边距来避免这种情况！

CSS定位浏览器调整大小

4 个答案:

----------------------------------------------- --------------------------------