代码之家 › 专栏 › 技术社区 › Noble-Surfer

CSS相对于DIV右侧的位置图像

css3 angular css html javascript

0

Noble-Surfer · 技术社区 · 6 年前

有一个 <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,再次在浏览器中查看页面,我可以看到关闭图标已经移到了右侧,但现在正好位于对话框标题的末尾,并且在对话框的边缘之前还有更多的空间在其右侧…

如何将“关闭”图标锚定到对话框的右侧,使其始终相对于该位置显示?

3 回复 | 直到 6 年前

1

2

Ancode 6 年前

您将图标定义为position:relative。对于您描述的内容,我理解您希望以绝对方式定位图标,并以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块的默认值,它根据周围的其他块来定位自身。像“top,left,right,bottom,z-index”这样的CSS对它们不起作用。
位置:固定 定义为fixed的元素将忽略页面中定义的所有块,并将使用 windows元素(整个文档) 作为参考。您可以使用类似于“top,left,right,bottom”的CSS来定位它。您可以使用“z-index”定义其他元素是在它上面还是下面。
位置:绝对 定义为absolute的元素将忽略页面中定义的所有块,并使用其 最近的非位置父级:静态 作为参考。您可以使用类似于“top,left,right,bottom”的CSS来定位它。您可以使用“z-index”定义其他元素是在它上面还是下面。
位置:相对 可以定义为绝对和静态之间的混合。元素将考虑接近自身的块,以便在文档中找到其位置。但是,可以使用“上、左、右、下”修改该位置,但该位置将用作元素所在的原始位置的参考。这种类型的元素也可以使用“z-index”。

总的来说,位置相对具有“绝对”和“静态”的属性。我还没有看到一个“position:relative”元素,在这个元素中,使用“top、bottom、left、right”是合理的,因为这会降低元素的可预测性,您可以使用填充或边距来替换它。

通常,位置相关元素的定义并不是因为您可以用“上、左、右下”来定位它们,而是因为使它们成为相对元素会让您用“位置:绝对”来定位元素,并以相对元素为参照。

我发现大多数让人困惑的问题都是因为他们的名字:“绝对”看起来你只考虑了窗口,而“相对”听起来像是你在使用其他元素作为基础。然而,事实是,“绝对”根本不是绝对的,它所采取的是与其他元素的关系。

编辑:正如geeksamu提到的,“图标”是一个类,所以它之前应该有一个点。

2

0

id3vz 6 年前

我认为你的代码有问题

.provContactSelector {
    icon {

图标是一个类,因此它应该是 .icon 不只是 icon

3

0

Johannes 6 年前

使用所使用的设置,元素将被移动到其原始位置左侧50px,因为您使用 position: relative; 和 right: 50px (即右边框距原始右边框50像素)。为了实现你所描述的,你应该使用 position: absolute; . 但是请注意,对于绝对位置来说 母元素 ,父元素需要 职位:相对; .