相对于div右侧的CSS位置图片

Question

我的Angular项目中有一个<div></div> ，当用户单击“编辑”按钮以编辑表中的字段时，该对话框显示一个对话框。

我刚刚在对话框中添加了“关闭”按钮，但是在正确放置该按钮时遇到了一些麻烦...

<div></div>定义为：

<div class="provContactSelector" *ngIf="payer.showProvContactSelector">
    ...
    <button class= "icon icon-close-selected" ...></button>
    ...
</div>

在.scss文件中，我为此<div>添加了代码块，并为图标添加了一些样式：

.provContactSelector {
    .icon {
        appearance: none;
        background-color: transparent;
        position: relative;
        border: none;
        right: 50px;
    }
}

我希望关闭按钮仅在对话框的右侧显示，但就目前而言，它当前显示在框宽度的一半以上，因此显示在对话框标题的顶部。

如果我将位置更改为right: 5px; ，重新编译CSS，然后再次在浏览器中查看页面，我可以看到关闭图标已经向右移动了很多，但现在恰好位于对话框标题的末尾，还有更多空间可以它的右边，在对话框边缘之前...

如何将关闭图标锚定在对话框的右侧，以使其始终相对于其所在位置显示？

Answer 1

您将图标定义为位置：相对。 对于您所描述的内容，我了解到您想以provContactSelector作为参考以绝对的方式放置图标。 在这种情况下，您应该将css更改为以下内容：

.provContactSelector {
    position: relative;

    .icon {
        appearance: none;
        background-color: transparent;
        position: absolute;
        border: none;
        right: 50px;
        top: 50px; // or whatever the value you need
    }
}

说明：

位置css指令可能有点棘手，而且我有很多人对其工作原理有些困惑。 因此，我将尝试简要解释正在发生的事情：

• position：static是普通html块的默认值，它根据周围的其他块来定位自己。 像“上，左，右，下，z-index”这样的css对它们不起作用。

• 位置：固定定义为固定的元素将忽略页面中定义的所有块，并使用windows元素（整个文档）作为参考来定位自身。 您可以使用诸如“上，左，右，下”之类的CSS进行定位。 您可以使用“ z-index”定义其他元素在其上方还是下方。

• position：absolute定义为absolute的元素将忽略页面中定义的所有块，并将使用其最近的父对象（NOT NOT）将自身定位：position作为参考。 您可以使用诸如“上，左，右，下”之类的css对其进行定位。 您可以使用“ z-index”定义其他元素在其上方还是下方。

• 位置：相对可以定义为绝对与静态的混合体。 该元素将考虑其自身附近的块以找到其在文档中的位置。 但是，您可以使用“上，左，右，下”来修改该位置，但是该位置将用作元素所位于的原始位置的参考。 这种类型的元素也可以使用“ z-index”。

总的来说，相对位置具有“绝对”和“静态”的特性。 我还没有看到“位置：相对”元素在哪里使用“上，下，左，右”是合理的，因为这使得该元素难以预测，您可以使用填充或边距来代替它。

通常，位置相对元素的定义不是因为您可以使用“顶部，左侧，右侧底部”来定位它们，而是因为将它们设置为相对位置将使您可以使用“ position：absolute”将它们内部定位，并将相对元素作为参考。

我发现大多数使人感到困惑的问题是由于他们的名字引起的：“绝对”看起来您将只考虑窗口而定位元素，而“相对”听起来就像您正在使用其他元素作为基础。 但是，事实是“绝对”根本不是绝对的，它是与其他元素有关的位置。

编辑：正如geeksamu所提到的，“图标”是一个类，因此它之前应该有一个点。

Answer 2

我认为您的代码存在问题

.provContactSelector {
    icon {

icon是一个类，因此它应该是.icon而不只是icon

Answer 3

使用您的设置后，元素将向其原始位置左移50px，因为您使用的是position: relative; right: 50px （即右边界距原始右边界50px）。 要实现您所描述的内容，您应该使用position: absolute; 。 但是请注意，要使绝对位置与父元素相关联，父元素需要具有position: relative; 。