绝对定位与固定定位 [英] Absolute vs Fixed Positioning
问题描述
我有一个自定义对话框,当我单击按钮时会显示该对话框。显示对话框后,我将显示一个覆盖图。叠加层的高度和宽度为 100%x 100%
。问题来了,高度100%只是获取浏览器窗口的高度,因此当我向下滚动页面时,它仍然位于顶部。
I have a custom dialog box which is shown when I click a button. After the dialog box is shown I show a overlay. The height and width of the overlay is 100% x 100%
. Here comes the problem, the height 100% just gets the height of the browser window so when I scroll down on the page it remains at the top. How can I set its height to full page height not browser's?
HTML:
<div id="overlay"></div>
<div class="description" style="text-align: justify;">Some text..(whole big text is in the fiddle didn't wrote here to shorten the code :))</div>
<div style="text-align: right">
<button id="offer_help">Offer Help</button>
</div>
<div class="offer_a_help">
<textarea rows="5">Write a short experience about yourself</textarea>
<textarea rows="5">Write what do you want in return</textarea>
<button id="send_offer">Send Offer</button>
</div>
CSS:
#overlay {
opacity: 0.5;
width: 100%;
height: 100%;
background-color: black;
display: none;
position: absolute;
top: 0;
left: 0;
}
#offer_help {
background-color: #eee;
border: 0;
padding: 10px;
border-radius: 2px;
box-shadow: 0px 0px 3px 1px #aaa;
}
.offer_a_help {
display: none;
width: 400px;
height: 250px;
position: fixed;
top: calc(100%/2 - 350px/2);
left: calc(100%/2 - 250px/2);
background-color: #eee;
border: 1px solid #bbb;
text-align: center;
}
.offer_a_help textarea {
width: 90%;
padding: 2px;
font-family: Calibri;
}
.offer_a_help textarea:first-child {
margin-top: 20px;
}
.offer_a_help button {
float: right;
margin-top: 10px;
margin-right: 10px;
border: 1px solid #bbb;
background-color: #ddd;
padding: 5px;
border-radius: 3px;
}
如何将其高度设置为全页高度而不是浏览器高度?
推荐答案
位置:绝对
将元素移出与文档一致。因此高度是视口的高度,并且top,left值是静态的。将其更改为位置:固定
,您将看到更好的结果。
position: absolute
takes the element out of line with the document. so the height is that of the viewport, and the top,left values are static. Change this to position: fixed
and you will see better results.
这篇关于绝对定位与固定定位的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!