css - 如何固定元素位置并使其响应

Question

我有一个 html、css 和 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>

如您所见，页面右上角有一个消息图标。

我想得到的是

1. 点击消息图标弹出消息窗口，不影响其他元素的位置。

2. 当缩小窗口时，消息窗口可以响应。

我已经试了几个小时了，还是没有得到好的结果，请帮助我。谢谢大家。

Answer 1

我想你忘了添加行 position: abosolute;我在这里为您添加了它。我把弹窗变小了，这样你就可以看清楚了

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