调整窗口大小时的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

把“位置：相对;”或“#search-box-form”元素上的“position：absolute”。这样，“。similar_story_block_form”位置对于父位置是相对/绝对的。而不是全球/身体的位置。

Answer 2

具有similar_story_block _表格的div的父级search-box-form应该具有位置相对性，而当类search-box-form的div应该具有绝对位置时，您需要更改顶部和左侧值search-box-form div。确保您还将left:0;top:0;添加到父{div，search-box-form

Answer 3

你必须以％为单位给出左，上，宽的样式值，而不是以像素为单位。

当您以像素为单位时，尺寸和位置将固定为标准浏览器尺寸，而不是重新调整尺寸。

如果你用％给出它，那么它会根据它的父元素自动改变它的宽度和位置。

例如，

 .similar_story_block_form{ width:80%; }

将使“similar_story_block_form”的宽度为其父元素的80％。如果父元素是body，它将自动改变它的宽度以及浏览器窗口宽度。