Question

我想要达到身体的左：0 ，但我在一个相对位置。有没有办法在不更改容器类的情况下执行此操作？

我正在寻找像 clear：两个的浮动对象。

HTML：

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

式：

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

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

Answer 1

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

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

你要问的任何方法都是黑客，你应该重新考虑（a）为什么你需要层次结构，或者（b）为什么你需要相对定位的包含块

Answer 2

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

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

Answer 3

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

#yourElement {
  position:initial;
}

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

Answer 4

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

尽管我确实理解该论点，但取决于容器的属性，“ position：relative”元素可能包含其他元素。但是，也许，“相对定位”含义的这种“过载”应该在规范中进行多样化。因为我不想绝对地将我的About元素定位，而是相对于其容器定位-除了使用这种相对定位，我不能做其他事情（可以吗？）。

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

通常，我将断点定义为“将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中，无法取消设置“ position：relative”设置。如果您可以将此属性绑定到屏幕尺寸，则可以采用上述解决方法。

如何清除＆＃34;相对位置？

4 个答案: