調整Windows大小時出現CSS問題

Question

您好，我在使用CSS時遇到問題，因為當我調整窗口大小時，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>

目前，我使用的鉻給我同樣的問題。 我在這里想念什么？ 謝謝您幫忙

Answer 1

放入“位置：相對”； 或“＃search-box-form”元素上的“ position：absolute”。 這樣，“。similar_story_block_form”位置將相對於父位置相對/絕對。 而不是全球/身體位置。

Answer 2

帶班格的父similar_story_block _form這是search-box-form應具有的相對位置，而與類的div search-box-form應該有絕對的位置，你需要改變的頂部和左側值search-box-form div。 確保您還添加了left:0;top:0; 到search-box-form父div

Answer 3

您必須以％而不是以像素為單位提供left，top，width的樣式值。

當您以像素為單位時，其大小和位置就固定為標准瀏覽器的大小，而不是調整大小的瀏覽器。

如果以％給出，則它將根據其父元素自動更改其寬度和位置。

例如，

 .similar_story_block_form{ width:80%; }

將使“ similar_story_block_form”的寬度為其父元素的寬度的80％。 如果父元素是body，它將自動更改其寬度以及瀏覽器窗口的寬度。