html - 使用浏览器调整大小的 CSS 定位

Question

div {
    position: absolute;
}

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

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

浏览了很多关于布局和浏览器调整大小的已回答问题，但我似乎无法理解。当我缩小窗口宽度时，是不是使用 % 而不是 px 使我的标题和内容 div 重叠？然而，窗口高度调整不会导致重叠。

Answer 1

与@Josh Crozier 相关，元素是相对于父元素的。当您的浏览器是主要 parent 时，它会改变它的 child 。除非你想一点一点地精确定位所有东西，否则你应该避免使用绝对定位，除非你必须这样做。尝试制作 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; }

这只是实现此目的的一种方式，但希望它能帮助您理解我要传达的信息。如果没有，请告诉我。