绝对相对：适应没有大小的位置

Question

如果这是一个骗局那么抱歉，但我没能找到它。

我有一个绝对定位的元素，其大小当前基于其内容：当前情况下的要求。但是，它也直接设置在其父项的右侧，而它需要在正下方。为了将绝对元素设置在其父元素下方，我设置了它的 left 和 top 并使父元素相对定位。但是，当我这样做时，绝对元素采用其父元素的宽度（非常小）。我真的需要绝对元素根据其（通常是动态的）内容定义自己的宽度。

有没有一种有效的方法可以将绝对元素设置在其父元素的正下方，同时使其开放以根据其内容调整大小？

编辑：

Here's 一个 jsfiddle link 来演示这个问题。

这里是 html:

<div id='menu'>
    <span class='menuItem'>
        <span class='menuItemTitle'>
            Item 1
        </span>
        <div class='menuItemContent'>
            test1 test1 test1 test1<br/>
            testing testing, one two three<br/>
            Anyone there?
        </div>
    </span>
    <span class='menuItem'>
        <span class='menuItemTitle'>
            Item 2: extra wide
        </span>
        <div class='menuItemContent'>
            test2 test2 test2 test2
        </div>
    </span>
</div>

这是CSS：

#menu
{
    background-color: blue;
    width: 100%;
}
.menuItem
{
    padding: 0 1em;
    //position: relative;
}
.menuItemTitle
{
    background-color: yellow;
}
.menuItemContent
{
    background-color: green;
    display: none;
    position: absolute;
    z-index: 100;
}
.menuItem:hover .menuItemContent
{
    display: inherit;
}

默认情况下它显示没有相对父元素的绝对元素。这允许元素的内容定义其宽度。如果您转到“.menuItem”样式并取消注释它的位置，那么绝对元素会被压扁。

Answer 1

默认情况下，绝对定位的元素是内容大小的，除非您设置其两侧（例如 "left" 和 "right"），或显式设置其宽度。

因此，如果您的绝对定位元素的大小相对于父元素，您必须执行上述操作之一。一个好的测试方法是使用检查员，例如Firefox 或 Chrome，以查看计算的 CSS，并查看它是否包含上述内容之一。您还可以通过在元素上设置 right: auto; 和 width: auto; 来强制防止这些情况。

一个小问题是它仍然会从其父级继承断行规则。为防止这种情况，只需将其宽度设置为一个非常大的数字，例如 1000000px。这将防止换行，但也会使其内部任何相对大小的元素都过大。然而，后者不是技术问题：相对大小的元素必须相对于 something 调整大小，因此您要么将其保留为相对于父对象，要么避免在中使用相对大小绝对定位元素的直接子元素。

如果您需要内容大小的边框，只需将另一个 div 放入您的绝对定位元素中，使其绝对定位或浮动，然后为其添加边框。

如果您想混合相对大小的元素和不相对大小的元素，允许相对于父元素调整绝对定位元素的大小，但同时，包装在dividual elements/paragraphs 不应该用非常宽的 divs 包裹。

如果您希望绝对定位元素相对于父元素的父元素调整大小，则根本不要使其绝对定位。相反，使用浮点数，并使其成为父对象的父对象的直接子对象。例如，这是我曾经制作内容大小侧边栏的一个技巧：

<div id="parent" style="float: left; width: 100%; clear:both"><!-- Float parent -->
    <div id="sidebar" style="float: left">
        Dynamic content
    </div>
    <div id="main_content_position" style="float: left"><!-- Extra div to set the position right of the sidebar -->
        <div id="main_content" style="width: 100%"><!-- Inner div with 100% width forces the position div to grow as large as it can, minus the size of the sidebar -->
            My content
        </div>
    </div>
</div>
<div id="clear_after" style="clear:both"></div><!-- Clear after the floating parent. We don't want it to actually float -->

请注意，此方法远非完美。它需要使用严格模式 (<!DOCTYPE html>)，如果你使用 RTL，你将需要至少一个额外的 div 在 Firefox 上，并且弄乱 overflow:visible 和 overflow:hidden, 否则自动换行会被破坏。

一般来说，让你的侧边栏有一个静态宽度是个好主意，然后使用旧的浮动和边距技巧：

<div id="parent" style="width: 100%">
    <div id="sidebar" style="float: left; width: 150px">
        Static content
    </div>
    <div id="main_content" style="margin-left: 150px">
        Dynamic content
    </div>
</div>

更新： 在 JSFiddle 中它是 "squished" 的原因是因为 "content sized" 在这种情况下是基于最大的词。显然，您想要的是根本不引入换行符。

（此外，您将 div 放在一个不完全有效的范围内，但我会让它通过）

一个部分有效的解决方案是增加 div 的宽度并使用内部 div，正如我之前提到的：

<div class='menuItemContent'>
    <div class='menuItemContentInner'>
        test1 test1 test1 test1<br/>
        testing testing, one two three<br/>
        Anyone there?
    </div>
</div>

并添加 CSS:

.menuItemContent
{
    display: none;
    position: absolute;
    left: 0;
    top: 1em;
    z-index: 100;
    width: 10000px;
}
.menuItemContentInner
{
    background-color: green;
    float: left;
}

此解决方案的缺陷在于，当您将鼠标悬停在项目上时，它会创建一个滚动条。使用 overflow:hidden 并不能解决问题，因为它还会将内容裁剪到菜单的高度。不幸的是，不可能 overflow:hidden 只在一个方向上。

然而，在玩弄了 fiddler 之后，我最终找到了这个解决方案：

.menuItem
{
    padding: 0 1em;
    float: left;
}
.menuItemContent
{
    background-color: green;
    display: none;
    position: absolute;
    z-index: 100;
    clear: left;
}

并在菜单末尾添加 <div style="clear:both"></div>。

这会导致内容换行并出现在文本下方，而无需显式设置其 left 或 top，因此不需要在项目上设置 position:relative。我已经在 Firefox、Internet Explorer 11 和 Chrome 中对其进行了测试。它实际上是一个更简洁的解决方案。

Answer 2

我最近在网站上使用下拉悬停子菜单来完成此操作。我找到的解决方案是将子 'absolute' 元素的 white-space 设置为 'nowrap'。在我的具体情况下：

&.menu-item-has-children {
    position: relative;
    .sub-menu {
        position: absolute;
        li a {
            white-space: nowrap;
        }
    }
}

这允许绝对元素根据其父元素定位，但仍允许其宽度基于比其父元素更宽的内容。

绝对相对：适应没有大小的位置

absolute in relative: adapt position without size

html

css

position

absolute