Question

浮动元素具有以下结构：

<a>The_button</a>
<div style="position:absolute">
    <div style="position:relative" class="inner-box">
       Content
       Content
       Content
       Content
       Content
    </div>
</div>

多个内盒控件的内容具有可变长度，因此内盒具有可变高度。我想定义CSS类.inner-box（不带JavaScript），以便内部框的右下角角位置与 upper-相关左侧链接的一角。这可能吗？

目标浏览器是IE8 +，Firefox，Chrome，Opera，Safari。

链接的高度和宽度始终相同。

Answer 1

~~到目前为止，我能想出的唯一解决方案是：~~

http://jsfiddle.net/fmVz6/ - 这需要在“外框”上定义高度和宽度，而不是内框（内部也必须绝对定位）。

目前在第二个工作......

~~http://jsfiddle.net/fmVz6/1/ - 这个不需要指定高度或宽度，它只需要在父div（例如空格）内部查看效果，否则背景不会出现。~~

好的，要让它显示在链接的左上角，http://jsfiddle.net/H5G8r/1/（需要重新排列HTML）。

这个不需要定义宽度，也不会将单词分成多行： http://jsfiddle.net/H5G8r/2/

选择： - ）

Answer 2

你有正确的想法，但倒退了。父元素需要position: relative和内部元素position: absolute，因为内部元素绝对位于相对于的父元素（技术上，它是offsetParent。指定{父级上的{1}}使其成为所有子元素的position: relative。

下一步：要将父元素的左上角与绝对定位的子项的右下角对齐，请在子项的CSS中指定offsetParent。这使得孩子<100％的父母宽度＆gt;远离父母的右边缘，并且＆lt;父母身高的100％＆gt;远离底部。

HTML

right: 100%; bottom: 100%

CSS

<div class=outer-box>
    The Button
    <div class=inner-box>
    </div>
</div>

同样在jsFiddle中：http://jsfiddle.net/ryanartecona/g344W/2/

当你将这些对齐后，你可能想在.outer-box { position: relative; } .inner-box { position: absolute; /* align bottom-right with offsetParent's top-left */ bottom: 100%; right: 100%; width: 100px; /* fixed width, else contents will shrink */ }内放置另一个框并使其.inner-box进行任何位置调整，例如在按钮上滑动固定距离等等。 / p>

CSS：右下角的相对定位

2 个答案:

HTML

CSS