我有一个弹出框,当用户在图标上移动鼠标时会显示。悬停的CSS如下:-
.profile-bubble {
background-color: #EDEDED;
border: 2px solid #666666;
font-size: 15px;
font-weight: bold;
line-height: 1.3em;
margin: 0.6% 2% 2% 90%;
padding: 10px;
position: absolute;
text-align: center;
width: 150px;
opacity: 0.9;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0 0 5px #888888;
-webkit-box-shadow: 0 0 5px #888888;
}
这很好用,但是问题是当我调整屏幕大小时,或者如果用户的分辨率比我小,那么警报框就会消失在屏幕之外。
我如何修改这个 css 以使其与屏幕大小成比例?
感谢您的帮助和时间。
更新 - - - - - - - - - - - - - - - - - - - - - - - - - -----这是标题css:-
/* Header*/
标题{填充底部:5px;}
#headerContainer {
height: 33px;
background-position: 10px 2px;
padding-top: 2px;
}
.headerProfileNotifications {
float: right;
padding-right: 4px;
margin: 3px;
position: relative;
}
.headerProfilePhoto {
float: right;
position: relative;
margin: 3px;
}
img {
border: 1px solid #D5D5D5;
}
img {
border: 1px solid #D5D5D5;
}
img:hover {
border: 2px solid #000000;
}
.headerProfileDetails {
float: right;
padding-right: 4px;
font-size: 11px;
text-align: right;
}
.headerProfileName {
margin-top: 2px;
}
.headerProfileEmail {
clear:both;
float:right;
margin-top: 0px;
}
和html: -
<header>
<div class="content-wrapper">
<div id="headerContainer">
<div class="headerProfileNotifications">
<img src="Images/" alt="notification" />
</div>
<div class="headerProfilePhoto">
<img src="Images/" alt="profile_photo" />
</div>
<div class="headerProfileDetails">
<div class="headerProfileName">
John Smith
</div>
<div class="headerProfileEmail">
john.smith@somemail.co.uk
</div>
</div>
</div>
</div>
</header>