Question

我正在尝试创建一个可以搜索的字典。我希望搜索栏在您滚动时关注您，但滚动条会被搜索栏覆盖。所以我希望搜索栏的大小包含div，但我不希望它覆盖滚动条。

JSFiddle：http://jsfiddle.net/tombatan/moLwjh9m/1/

我认为主要问题在于此代码：

.lgPopup {
background-color:rgba(255, 255, 255, 1);
border-radius:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border:5px solid rgba(0, 0, 0, 0.7);
width:500px;
margin:0 auto;
max-height:700px;
overflow-y:auto;
overflow-x:hidden;
}

#searchBlock {
width:inherit;
display:block;
background-color:white;
padding-bottom:10px;
border-bottom:1px solid rgba(173, 173, 173, 0);
}

HTML：

<div class="lgPopup" id="dicPopup">
    <h2 class="popupHead">Dictionary</h2>

    <form id="searchBlock">
         <input type="text" name="word" size="5" maxlength="5" id="searchWord" placeholder="Search Word" />
         <div class="button" id="searchButton">Submit</div>
    </form>
    <p class="popupBody" id="dicText"></p>
</div>

Answer 1

您希望搜索栏始终贴在顶部吗？

.lgPopup {

    position:fixed;

...
}

如何在不覆盖垂直滚动的情况下使固定div跨越父元素？

1 个答案: