html - 调整窗口大小时的CSS问题

Question

嗨，我遇到了 css 问题，因为当我调整窗口大小时，div 没有正确放置，如下所示

这是涉及div的css

.similar_story_block_form {
    background-color: white;
    border: 1px solid #CCCCCC;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.8);
    font-size: 13px;
    left: 337px;
    position: absolute;
    top: 105px;
    width: 337px;
    z-index: 100;
}

HTML代码

<div id="search-box-form">
  <div style="display:block;" class="similar_story_block_form">
     <div class="head">
        <p>What interest you?</p>
        <a onclick="javascript:closeSearchBox(event);" id="close-element-form" href="#"></a></div>
<ul>
 <li>
   <a no-confirm="" class="pushstate">
    <div col-400="" class="fleft"><p>No such business</p></div></a></li>
    <div class="head"><p>Nothing is found from <span style="color:red;font-weight:italic;">"s"</span></p>
    </div>
</ul>
</div>
</div>

目前我使用 chrome，它给我同样的问题。我在这里错过了什么？感谢您的帮助

Answer 1

放置“position:relative；”或“#search-box-form”元素上的“position: absolute”。这样“.similar_story_block_form”位置将相对于/绝对于父位置。而不是全局/ body 位置。