Question

我试图将一个绝对div放在一个相对定位的div中。但我不想为相对div定义一个高度。

相对div具有背景颜色，当我没有定义高度时，绝对div会在外面“＃”;＆＃39;相对的div。 我无法控制文本的行数，因此div的高度会发生变化

HTML

<div class="row top-footer">
    <div class="top-footer-text text-center">
        <div class="test">
        <h1>title</h1>

        <div class="footer-btn-wrap">
          <div class="footer-btn"><a href="...">button</a></div>

          <div class="footer-btn"><a href="...">button</a></div>
        </div>
        </div>      
    </div>
</div><!-- /top-footer -->

CSS

.top-footer {
position: relative;
background-color: #686a6f;
width: 100%;
padding-top: 40px; margin: 0;
}

.test { 
position: absolute; 
top: 0px; margin: 0;
}

修改

我希望.top-footer（position：relative）包含.test（position：absolute），在.test的顶部和底部有空格/填充/边距。 div的高度未知，因为内容可能占用多行，具体取决于屏幕尺寸

Answer 1

在子div周围添加空格非常简单。但是，防止父div崩溃是比较棘手的，是你需要首先解决的问题。您遇到的问题是，如果父级相对定位且子级位置绝对，则整个页面上唯一实际“知道”孩子所在位置的元素是父级 ...即使这样这是一个相当糟糕的父母，因为它甚至不会给孩子足够的空间！ DOM的其余部分将表现得好像元素不在那里 - 其他非定位元素将浮动在其上方或上方 - 甚至文本也会被您的子div遮挡。假设您希望以这种方式使用绝对定位将其他内容放在父div中，这意味着您将不得不在所有地方使用绝对定位...这可能会在以后的大脑调试布局问题上有点沉重

我能想到的唯一可能的解决方案是：

使用javaascript嗅出子div的高度并将其应用于父级。如果您使用像jQuery这样的库，但需要额外的下载文件，并且如果这是您正在使用它的唯一任务，则会使您的网站不必要地笨重，这是一项相当简单的工作。这也无法解决子div遮挡页面上其他元素的问题。
在孩子身上使用display:inline-block重做你的CSS（并且可能需要进行大量的改造，具体取决于你有多远和样式的复杂性）...这将停止来自折叠的父级，但可能会给您额外的布局问题。
将CSS（同上）重写为子{div}的float:left。然后你需要使用CSS“clear hack”以防止父divv崩溃，虽然这是一小块你可以从其他地方剪切和粘贴的CSS ......一个简单的工作。

如果您决定使用这样的绝对定位，我首选的解决方案是使用jQuery（选项1），因为我的大多数工作都倾向于使用它的程度......这是一个我会方便的工具执行此任务的代码非常简单。

编辑 - 这是一个让你入门的小提琴。 https://jsfiddle.net/fo8mq1vf/

Answer 2

这就是代码输出的样子：https://jsfiddle.net/s3zLa54t/2/。父div（.top-footer）确实包含.test div。您使用什么浏览器查看输出？

至于填充，我猜你没有看到改变padding-top的任何影响。尝试删除top: 0px div。

中的.test属性

如果这不是您想要的，请在此澄清问题。

Answer 3

您的问题的答案只是删除

position:absolute from your absolute div (.test)
position:relative from your relative div (.top-footer)
height:300px from your relative div (.top-footer)

这是https://jsfiddle.net/s3zLa54t/3/的测试版本，主div下有多个div。你可以检查它是否超出灰色背景。

Answer 4

.top-footer {
    position: absolute;
    background-color: #686a6f;
    width: 100%;
    padding:0px;
    margin: 0;
}
.test h1{ 
    padding-left:20px;
    position: relative; 
    top: 5px; margin: 0;
    float:left;
    color:#FFF;
}
.footer-btn,.footer-btn-wrap
{
    padding-left:200px;
    color:#FFF;
}
.footer-btn a{
    padding:5px 10px;
    float:left;
    color:#ffffff;
    text-transform:capitalize;
    text-decoration:none;
}

相对内的绝对位置，没有定义的高度

4 个答案: