4

我想到达身体的左边：0，但我在一个相对的位置内。有什么方法可以在不更改容器类的情况下做到这一点？

我正在寻找类似clear: both of floating objects 的东西。

html:

<div class="container">
    <div class="absolute">Content</div>
</div>

风格：

.container {
    position: relative;
    left: 100px; /*or any other value*/
}

.absolute {
    position: absolute;
    left: 0;
}
4

4 回答 4

6

您要求的内容违反了相对包含块中绝对定位元素的预期用法。CSS2 规范说：

虽然父外盒实际上并没有偏移，但是将它的 'position' 属性设置为 'relative' 意味着它的盒子可以作为定位后代的包含块。

执行您所要求的任何方法都是一种技巧，您应该重新考虑（a）为什么需要层次结构保持原样，或者（b）为什么需要包含块相对定位。

于 2013-08-06T20:07:59.687 回答
0

我遇到了同样的问题，我不喜欢“不要使用它，这很糟糕”的答案，因为我发现有时使用这些“位置”属性很有用。

尽管我确实理解这个论点，但“位置：相对”元素可能包含其他元素，具体取决于容器的属性。但是，也许，这种“相对定位”含义的“重载”应该在规范中多样化。因为我不想以绝对方式定位我的相关元素，而是相对于它的容器——除了使用这种相对定位（可以吗？）之外，我无法做到这一点。

所以我找到了这个解决方案。

通常，我将断点定义为“减小 XY 大小”，如下所示：

@wide-screen-down: ~'(max-width:1199px)';
@desktop-down: ~'(max-width:991px)';
@tablet-down: ~'(max-width:767px)';

等等

通常这很好，但在这种情况下，我只是不希望元素在手机尺寸上相对定位。所以我定义了一个额外的断点：

@phone-up: ~'(min-width:481px)';

因此，“位置：相对”仅设置在某个最小宽度上！而不是设置它，然后尝试取消设置它 - 这对我来说不适用于任何关键字（未设置，初始，继承）。

这并不能真正回答 OP 的问题 - 分别。答案是，没有办法取消“位置：相对”设置，至少在 Linux 上的 Chrome 86 中是这样。解决方法如上所述，以防您可以将此属性与屏幕尺寸相关联。

于 2020-11-25T11:38:57.080 回答
0 
.container {
    position: relative;
    left: 100px; /*or any other value*/
    overflow: visible
}

.absolute {
    position: absolute;
    left: 0;
}
于 2015-12-03T08:34:54.437 回答
0

我能够解决这个问题的方法是使用关键字“initial”。这会将任何属性恢复为其默认值。

#yourElement {
  position:initial;
}

如需更多信息，请参阅：https ://www.w3schools.com/cssref/css_initial.asp 和 https://www.w3schools.com/cssref/pr_class_position.asp 希望对您有所帮助！

于 2019-07-22T06:38:10.970 回答