目前我正在开发像Messenger这样的Facebook。现在我在聊天区工作，这件事应该修复。但如果我突然position:fixed div消失了。我不知道该怎么做。
这是我的HTML / PHP代码。
<?php
// Turn off all error reporting
//shop not login users from entering
if(isset($_SESSION['id'])){
$user_id = $_SESSION['id'];
}else{
}
require_once("./inc/connect.inc.php");
?>
<header>
<link rel="stylesheet" href="home - Copy.css" />
<nav>
<h3><a class="h3" href="#">Cp</a></h3>
<div>
<?php
//Start your session
session_start();
//Read your session (if it is set)
if (isset($_SESSION['user_login']))
echo $_SESSION['user_login'];
?>
</div>
<div><a href="logout.php"><span>Logout</span></a></div>
<div><a href="#"><span>Settings </span></a></div>
</nav>
<body>
<div class="shead">
<div class="a1"> <li >Frequent Member</li>
<ul>
<?php
//show all the users expect me
$user_id = $_SESSION['id'];
$q = mysql_query("SELECT * FROM `users` WHERE id!='$user_id'");
//display all the results
while($row = mysql_fetch_assoc($q)){
echo "<a href='home.php?id={$row['id']}'><p>{$row['username']}</p></a>";
}
?>
</ul>
</div>
<div class="a2"> <li >Site's Popular in Your College</li></div>
</div>
</header>
<div class="rss">
<?php
//include('rssclass.php');
//sinclude('rss.php');
?>
<div class="message-right">
<!-- display message -->
<div class="display-message">
<?php
//check $_GET['id'] is set
if(isset($_GET['id'])){
$user_two = trim(mysql_real_escape_string( $_GET['id']));
//check $user_two is valid
$q = mysql_query( "SELECT `id` FROM `users` WHERE id='$user_two' AND id!='$user_id'");
//valid $user_two
if(mysql_num_rows($q) == 1){
//check $user_id and $user_two has conversation or not if no start one
$conver = mysql_query( "SELECT * FROM conversation WHERE (user_one='$user_id' AND user_two='$user_two') OR (user_one='$user_two' AND user_two='$user_id')");
//they have a conversation
if(mysql_num_rows($conver) == 1){
//fetch the converstaion id
$fetch = mysql_fetch_assoc($conver);
$conversation_id = $fetch['id'];
}else{ //they do not have a conversation
//start a new converstaion and fetch its id
$q = mysql_query( "INSERT INTO `conversation` VALUES ('','$user_id',$user_two)");
$conversation_id = mysql_insert_id($con);
}
}else{
die("Invalid $_GET ID.");
}
}else {
die("Click On the Person to start Chating.");
}
?>
</div>
<div class="send-message">
<!-- store conversation_id, user_from, user_to so that we can send send this values to post_message_ajax.php -->
<input type="hidden" id="conversation_id" value="<?php echo base64_encode($conversation_id); ?>">
<input type="hidden" id="user_form" value="<?php echo base64_encode($user_id); ?>">
<input type="hidden" id="user_to" value="<?php echo base64_encode($user_two); ?>">
<div class="textbox">
<input class="t_box" type="text" id="message" placeholder="Enter Your Message"/>
<button class="t_btn" id="reply">Reply</button>
<span id="error"></span>
</div>
</div>
</div>
<!--
<div class="textbox">
<form action="#" method="post">
<input type="text" name="msg_body" class="t_box" id="t_box" >
<input type="submit" class="t_btn" id="t_btn" name="submit" value="Send">
</form>
</div>-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
这是我的css和.message-right是出现问题的元素。
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', Arial, sans-serif;
background-color: #222;
overflow-x: hidden;
text-align: center;
}
header {
position: fixed;
width: 100%;
height: 50px;
background-color: #FFD700;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
header > nav > div {
float: right;
width: 10.6666%;
height: 100%;
position: relative;
}
header > nav > div > a {
text-align: center;
width: 100%;
height: 100%;
display: block;
line-height: 50px;
color: #222;
transition: background-color 0.2s ease;
text-transform: uppercase;
}
header > nav > div:hover > a {
background-color: rgba(0, 0, 0, 0.1);
cursor: pointer;
}
a{
text-decoration: none;
color: #000;
}
a:hover{
text-decoration: none;
background-color: #FFD700;
font-weight: bolder;
}
h3{
float: left;
height: 100%;
text-align: bottom;
padding-top: 10px;
padding-left: 10px;
}
.h3{
color: #222;
font-size:25px;
}
.nav{
position: fixed;
}
.title-head {
font-size:18px;
font-weight:bold;
text-align:left;
background-color:#F5F6F7;
color:#000;
float: left;
width: 455.33px;
}
.feeds-links {
text-align:left;
width: 455.33;
font-size: 20px;
padding:5px;
border:1px solid #dedede;
padding-top:inherit;
color: #000;
background-color: #FFFFFF;
}
.rss{
float: right;
padding-top: 100px;
}
.h2{
color: #000;
background: #ffd700;
height: 45px;
width: 455.33px;
padding-top: 10px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.textarea{
float: left;
padding-top:553px;
width: 455.3px;
position: fixed;
}
.t_box{
float: left;
border-radius: 5px;
border: 1px solid #FFD700;
background-color: #fff;
padding: 5px 5px;
font-size: 1em;
width: 78%;
outline: none;
}
.textbox{
background-color: #FFD700;
border: 1px solid #FFD700;
margin-top: 565px;
padding: 10px;
height: 50px;
width:455.5px;
float: left;
}
.t_btn{
text-decoration: none;
color:#222;
font-weight: bold;
background-color: transparent;
border: none;
font-size: 1em;
cursor: pointer;
height: 33px;
width: 70px;
outline: none;
}
.shead{
height: 50px;
width: 910px;
float: right;
margin-top: 0px;
background: #FFD700;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
position: sticky;
border-top: #000;
}
.a1{
text-align: center;
width: 50%;
display: block;
line-height: 50px;
color: #000;
font-size: 19px;
list-style: none;
font: #000;
}
.a2{
text-align: center;
width: 50%;
display: block;
line-height: 50px;
color: #222;
float: right;
transition: background-color 0.2s ease;
font-size:19px;
text-decoration: none;
margin-top: -150px;
list-style: none;
}
.frequentmem{
display: block;
height: 100%;
width: 100%;
float: right;
}
.message-right{
margin-right:908px;
background: #fff;
height: 615px;
width:455.5px;
margin-top: 50px;
float: left;
position: fixed;
}
hr{
background: #e9e9e9;
border: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 1px;
margin: 0;
min-height: 1px;
}
.message{
width: 455.3px;
background: #fff;
height: 50px;
padding: 8px 24px;
}
答案 0 :(得分：1)
我认为浮动的div和固定位置不能很好地结合在一起。
尝试删除float：left并按照上面建议的用户，添加左：some_pixels，top：some_pixels以对齐div＆＃34;绝对＆＃34;在页面上。我通常会为div添加边框/背景颜色以识别它们在页面上的位置（然后在以后删除），因此您可以尝试这样做以确保它在您期望的位置。
.message-right{
margin-right:908px;
background: #fff;
height: 615px;
width:455.5px;
margin-top: 50px;
**float: left;** <-- remove
position: fixed;
left: 50px;
top: 50px;
}
答案 1 :(得分：1)
float：如果你的位置是固定的，左边没有做任何事情，你应该添加左边：0，另一方面，你应该总是指定一个固定元素的垂直和水平位置，除非你希望它留在它被渲染的页面的一部分这意味着如果你的消息权利是在折叠下方呈现的，那么除非你告诉它应该保持固定的坐标，否则你的用户将无法看到它
答案 2 :(得分：0)
对于固定的位置，也许你的div落后于其他一些内容。您是否尝试过使用z-index？将z-index设置为1会将其向前移动到另一个div上。此外，您的固定位置没有顶部，底部，右侧或左侧尺寸。您可以尝试通过分配这些值来移动div。 Example。 无论如何，如果没有HTML与CSS一起使用，很难说出你的问题是什么。发布可以帮助您获得更好的响应。 我没有50个声望，所以我不得不添加这个评论作为答案。
答案 3 :(得分：0)
你的代码看起来很好。添加边框应该可以做到这一点。例如： 但是如果没有剩下的代码（html和css），就很难知道出了什么问题。
.chat-area{
margin-right:908px;
background: #fff;
border:1px solid black;<-- like this
height: 615px;
width:455.5px;
margin-top: 50px;
float: left;
position: fixed;
}