Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script language="javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="myContainer">
  <ul class="nav nav-tabs" >
    <li class="active"><a href="#chat" data-toggle="tab">Chat</a></li>
    <li><a href="#users" data-toggle="tab">Users</a></li>
  </ul>
  <div class="tab-content" style="height:500px">
    <div class="tab-pane active" id="chat">
      <div style="" >
        <? include("lorem.php");?>
        <div id="banner" style="position:fixed;top:560px;height:30px;width:100%;background-color:#F00"> </div>
      </div>
    </div>
    <div class="tab-pane" id="users"> dd... </div>
  </div>
</div>
</body>
</html>

工作正常：问题是那个

    <div id="banner" style="position:fixed;**top:560px**;height:30px;width:100%;background-color:#F00"> </div>

绝对位于顶部：560px。

如果<div class="tab-content" style="height:500px">有另一个高度，我需要绝对定位横幅！

目标是创建该模板：

1）引导标签

2）一个标签内的一个div，它是一个包含聊天的div

3）在该div的底部，粘贴了一个包含聊天输入文本的横幅div

问候

此处出现所需的结果 enter image description here

Answer 1

在'tab-container'中设置'banner'。将横幅的位置设置为绝对位置并将其置于底部

<div id ="tab-container" ...>
 <div id="banner" style="position:absolute; bottom: -2px;">
</div>
</div>

Answer 2

你的问题不清楚，但似乎这就是你想要的。

<div class="tab-content" style="position:relative">
    <div class="tab-pane active" id="chat">
      <div style="" >
        <? include("lorem.php");?>
        <div id="banner" style="position:absolute;bottom:-30px;height:30px;width:100%;background-color:#F00"> </div>

这将使div＃banner直接位于div.tab-content的正下方，无论div.tab-content有多高。

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 3

将top:560px更改为bottom: 0。

请记住，定位元素（固定，绝对，相对）始终相对于具有另一个非默认位置的最近父元素。然后仔细检查你没有发布的元素的位置。

考虑创建一个Fiddle。 JPEG糟透了。

Answer 4

我同意Arinta，如果横幅消失了，你可能需要检查css中的拼写错误。有些浏览器配有控制台，但大多数都带有'右键单击 - ＆gt;检查'功能以检查正在拾取的css。

此外，如果文本被新定位的div隐藏，您将希望文本可见。通过将padding-bottom设置为等于聊天的高度来允许此操作。

父div（你有一个style =''）需要一个定位标签才能使绝对特征起作用。固定将起作用，但横幅相对于整个页面而不是下一个定位元素定位。（由你决定，但我建议绝对）。

<div style="padding-bottom: 30px; position: relative" >
  <? include("lorem.php");?>
  <div id="banner" style="position:absolute;bottom:-30px;height:30px;width:100%;background-color:#F00">
  </div>

如何使固定位置div相对于另一个div？

4 个答案: