背景:我正在用 html/css 创建一个聊天室页面。 div rm-container 包含一个显示消息的区域(div class rm-messages)，一个输入消息的区域，以及一个包含所有内容的div当前在聊天室中的用户 (rm-users)。
问题:我希望rm-users位于rm-container的右上角，但我无法获取它上类。我按照 w3schools 中的定位教程进行操作在我的 css 中，将 rm-container 位置更改为相对位置，并将 rm-users 位置更改为绝对位置，但我无法获得所需的结果。相反，我得到的是 rm-users，它在 rm-messages 下方，如果默认位置没有更改，这是可以预期的。我在下面附上了 css 和 html 文件。
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
body {
background-color: #F0F0E6;
font-family: 'Open Sans Condensed', sans-serif;
margin: 0;
padding: 0
}
.rm-name {
font-size: 20px;
margin-left:auto;
margin-right:auto;
margin-top:15px;
text-align:center;
max-width:100px;
}
.userbox {
border: 1px solid black;
max-width:300px;
padding-bottom:50px;
margin-left:15px;
margin-top:15px;
}
.rm-container {
position:relative;
background-color: white;
border: 1px groove black;
margin-left:auto;
margin-right: auto;
margin-top: 40px;
max-width: 1000px;
padding-bottom: 100px
}
.rm-messages {
position:static;
border: 1px groove black;
margin-top:10px;
max-width: 700px;
margin-left:15px;
height:400px;
}
.rm-users {
position:absolute;
margin-top: 15px;
border: 1px groove black;
margin-right: 15px;
width: 200px;
height: 50px;
overflow-y: scroll;
overflow-x: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>room-name</title>
<link rel="stylesheet" href="../public/css/room.css">
</head>
<body>
<img src="something" class="chat_room_pic">
<div class="rm-userbox">
<img src="something" class="userPic">
<h3 class="userName">Username | <a href=#> logout | </a><a href="#"> more chatrooms</a></h3>
</div>
<div class="rm-container">
<div id="rm-name"> room-name </div>
<div class="rm-messages">
<ul class="messages">
<li>
<div class="msgbox">
<div class="pic"><img src="something>">Username </div>
<div class="msg"><p>Hello there!</p></div>
</div>
</li>
</ul>
</div>
<div class="rm-users">
<ul class="users">
<li><img src="something">
</div>
</div>
</body>
</html>
最佳答案
只需将 top: -70px 添加到 .rm-users
.rm-users {
border: 1px groove black;
height: 50px;
margin-right: 15px;
margin-top: 15px;
overflow: scroll;
position: absolute;
top: -70px;
width: 200px;
}
关于html - 无法从 css 中的相对/绝对定位获得所需的输出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33323904/