Question

我的Angular项目中有一个@Autowired private ApplicationService applicationService; List<Application> applications = new ArrayList<>(); for (String keyword : keywords) { applications.addAll(applicationService.findByProposalContainingIgnoreCase(keyword)); }，当用户单击“编辑”按钮以编辑表中的字段时，该对话框显示。

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

<div></div>定义为：

<div></div>

在.scss文件中，我为此<div class="provContactSelector" *ngIf="payer.showProvContactSelector"> ... <button class= "icon icon-close-selected" ...></button> ... </div>添加了代码块，并为图标添加了一些样式：

<div>

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

如果将位置更改为.provContactSelector { .icon { appearance: none; background-color: transparent; position: relative; border: none; right: 50px; } }，重新编译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指令可能会有些棘手，而且我很多人对其工作原理有些困惑。因此，我将尝试简要解释正在发生的事情：

位置：静态是普通html块的默认值，它根据周围的其他块来定位自身。像“上，左，右，下，z-index”这样的css不适用于它们。
位置：固定：定义为固定的元素将忽略页面中定义的所有块，并使用 windows元素（整个文档）进行自身定位作为参考。您可以使用诸如“上，左，右，下”之类的CSS进行定位。您可以使用“ z-index”定义其他元素在其上方还是下方。
位置：绝对：定义为“绝对”的元素将忽略页面中定义的所有块，并使用其最近未定位的父元素来定位自身 >作为参考。您可以使用诸如“上，左，右，下”之类的css对其进行定位。您可以使用“ z-index”定义其他元素在其上方还是下方。
位置：相对可以定义为绝对值和静态值的混合形式。该元素将考虑其自身附近的块以找到其在文档中的位置。但是，您可以使用“上，左，右，下”来修改该位置，但是该位置将用作元素所位于的原始位置的参考。这种类型的元素也可以使用“ z-index”。

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

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

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

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

Answer 2

我认为您的代码存在问题

.provContactSelector {
    icon {

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

Answer 3

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

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

3 个答案: