相對於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; 。