Jquery 调整大小时弹出警告离开屏幕

我有一个弹出框，当用户在图标上移动鼠标时显示。悬停的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； }

}

}

}

}

}

}

}

}

}

以及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>

约翰·史密斯
厕所。smith@somemail.co.uk

将宽度和高度也设为一个百分比-

width:50%;
height:50%;

将框大小调整为边框框大小，这样就不必考虑边距、填充等因素，而只需考虑宽度

然后相应地对其进行定位（您有

位置：绝对
）-

您的图像和气泡必须位于容器内，容器内没有其他元素。

看到这个了吗

此容器必须相对放置。
请尝试将
左侧
和
顶部
属性放入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;
    left:25%; //<-------------------------------add this
    top:25%;  //<-------------------------------and this
 }

.profile气泡{
背景色：#EDEDED；
边框：2个实心#666666；
字体大小：15px；
字体大小：粗体；
线高：1.3em；
利润率：0.6%2%2%90%；
填充：10px；
位置：绝对位置；
文本对齐：居中；
宽度：150px；
不透明度：0.9；
-moz边界半径：10px；
-webkit边界半径：10px；
-莫兹盒阴影：0 0 5px#8888888；
-网络工具包盒阴影：0 0 5px#8888888；
左：25%；//您是否在JS中添加定位，因为我看到您将其设置为绝对位置，但没有上/左/下/右？我确实添加了百分比，虽然它现在看起来更好了，但它仍然没有在图像下正确对齐。我尝试了右：0；和上：5%，这是最好的位置，但在重新调整大小时仍然没有正确对齐zedIs您希望此气泡与之对齐的图像具有位置：静态？它必须是除此之外的任何内容，否则位置：绝对无效。我有以下图像css:-.headerProfilePhoto{float:right；高度：33px；宽度：22px；边距：5px；}感谢Vineet示例，它帮助我解决了问题！我尝试了正确的：0；顶部：5%，但仍然没有正确对齐
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;

<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>

width:50%;
height:50%;

top:20%;
left:20%;

.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;
    left:25%; //<-------------------------------add this
    top:25%;  //<-------------------------------and this
 }