how to fix element position and and make it responsive - css

Question

I have a html, css and js:
$(document).ready(function() {
$('#friends-chats-noti-button').on("click", function(e, data) {
// TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
$('#friends-chats').fadeToggle('fast', 'linear', function() {
if ($('#friends-chats').is(':hidden')) {}
});
});
});
/* friends chats */
#friends-chats-container {
position:relative;
margin-right:10px;
margin-left:10px;
}
/* A CIRCLE LIKE BUTTON IN THE TOP MENU. */
#friends-chats-noti-button {
width:22px;
height:22px;
line-height:22px;
cursor:pointer;
}
/* THE NOTIFICAIONS WINDOW. THIS REMAINS HIDDEN WHEN THE PAGE LOADS. */
#friends-chats {
display:none;
width:900px;
top:55px;
right:10%;
background:#FFF;
border:solid 1px rgba(100, 100, 100, .20);
-webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
z-index: 1000;
}
/* AN ARROW LIKE STRUCTURE JUST OVER THE NOTIFICATIONS WINDOW */
#notifications:before {
content: '';
display:block;
width:0;
height:0;
color:transparent;
border:10px solid #CCC;
border-color:transparent transparent #fff;
margin-top:-20px;
margin-left:345px;
}
#friends-chats:before {
content: '';
display:block;
width:0;
height:0;
color:transparent;
border:10px solid #CCC;
border-color:transparent transparent #fff;
margin-top:-20px;
margin-left:870px;
}
.messaging { padding: 0 0 50px 0;}
.msg_history {
height: 516px;
overflow-y: auto;
}
#chat-message-input-private
{
margin: 1% 0 1% 1%;
width: 80%;
height: 68px;
font-size: 18px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<ul class="nav navbar-nav navbar-right">
<li id="friends-chats-container">
<div id="friends-chats-noti-button">
<i class="fa fa-comments-o fa-2x" aria-hidden="true"></i>
</div>
<div>
<p> other element </p>
</div>
<div id="friends-chats">
<div class="container">
<h3 class=" text-center">Messaging</h3>
<div class="messaging">
<div class="inbox_msg">
<div class="inbox_people">
<div class="headind_srch">
<div class="recent_heading">
<h4>Recent</h4>
</div>
</div>
<div class="inbox_chat" id="inbox_chat">
</div>
</div>
<div class="mesgs">
<div class="msg_history" id="msg_history">
</div>
<div class="inputContainer">
<input id="chat-message-input-private" autocomplete="off" placeholder="Type your message...">
</div>
</div>
</div>
</div>
<!---->
</div>
</div>
</li>
</ul>
</nav>
<div>some element</div>
<div>some element</div>
<div>some element</div>
<div>some element</div>
<div>some element</div>
as you can see, there is a message icon on top-right side of the page.
what i want to get is
when click the message icon, the message window will pop out and don't impact other element's position.
when narrow the window, the message window can be responsive.
i already try several hours, but still haven't get good result, please help me. thanks everyone.

Answer 1

I think you forgot about adding the line position: abosolute;
I added it for you here. And I made the popup smaller so that you can see clearly
$(document).ready(function() {
$('#friends-chats-noti-button').on("click", function(e, data) {
// TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
$('#friends-chats').fadeToggle('fast', 'linear', function() {
if ($('#friends-chats').is(':hidden')) {}
});
});
});
/* friends chats */
#friends-chats-container {
position:relative;
margin-right:10px;
margin-left:10px;
padding: 0 15px;
}
/* A CIRCLE LIKE BUTTON IN THE TOP MENU. */
#friends-chats-noti-button {
width:22px;
height:22px;
line-height:22px;
cursor:pointer;
}
/* THE NOTIFICAIONS WINDOW. THIS REMAINS HIDDEN WHEN THE PAGE LOADS. */
#friends-chats {
display:none;
width:600px;
top:55px;
right:10%;
background:#FFF;
border:solid 1px rgba(100, 100, 100, .20);
-webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
z-index: 1000;
position: absolute;
}
/* AN ARROW LIKE STRUCTURE JUST OVER THE NOTIFICATIONS WINDOW */
#notifications:before {
content: '';
display:block;
width:0;
height:0;
color:transparent;
border:10px solid #CCC;
border-color:transparent transparent #fff;
margin-top:-20px;
margin-left:345px;
}
#friends-chats:before {
content: '';
display:block;
width:0;
height:0;
color:transparent;
border:10px solid #CCC;
border-color:transparent transparent #fff;
margin-top:-20px;
margin-left:870px;
}
.messaging { padding: 0 0 50px 0;}
.msg_history {
height: 516px;
overflow-y: auto;
}
#chat-message-input-private
{
margin: 1% 0 1% 1%;
width: 80%;
height: 68px;
font-size: 18px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<ul class="nav navbar-nav navbar-right">
<li id="friends-chats-container">
<div id="friends-chats-noti-button">
<i class="fa fa-comments-o fa-2x" aria-hidden="true"></i>
</div>
<div>
<p> other element </p>
</div>
<div id="friends-chats">
<div class="container">
<h3 class=" text-center">Messaging</h3>
<div class="messaging">
<div class="inbox_msg">
<div class="inbox_people">
<div class="headind_srch">
<div class="recent_heading">
<h4>Recent</h4>
</div>
</div>
<div class="inbox_chat" id="inbox_chat">
</div>
</div>
<div class="mesgs">
<div class="msg_history" id="msg_history">
</div>
<div class="inputContainer">
<input id="chat-message-input-private" autocomplete="off" placeholder="Type your message...">
</div>
</div>
</div>
</div>
<!---->
</div>
</div>
</li>
</ul>
</nav>
<div>some element</div>
<div>some element</div>
<div>some element</div>
<div>some element</div>
<div>some element</div>