CSS position image relative to right hand side of div

Question

There is a <div></div> in my Angular project, that's displaying a dialog when the user click an 'Edit' button to edit field in a table.

I have just added a 'close' button to the dialog, but am having some trouble positioning that button correctly...

The <div></div> is defined with:

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

In the .scss file, I've added the block for this <div> , and added some styling to the icon:

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

I want the close button to be displayed just slightly in from the right hand side of the dialog, but as it stands, it's currently displayed just over half way across the width of the box, and so is displayed on top of the dialog title.

If I change the positioning to right: 5px; , recompile the CSS, and view the page in the browser again, I can see that the close icon has moved further to the right, but is now just right at the end of the dialog title, and there is still a lot more space to its right, before the edge of the dialog...

How can I anchor the close icon to the right hand side of the dialog, so that it's always displayed relative to where that is?

Answer 1

you defined the icon as position: relative. For what you descrived, I understood that you want to position the icon in absolute way, taking provContactSelector as the reference. In this case you should change the css to the following:

.provContactSelector {
    position: relative;

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

Explanation:

position css instruction can be a bit tricky, and I have a lot of people having some confusion with how it works. So I will try to briefly explain what is happening:

• position: static is the default value of a normal html block, and it positions itself depending of the other blocks that are around it. css like "top, left, right, bottom, z-index" won't work on them.

• position: fixed an element defined as fixed will ignore all the blocks defined in the page and will position itself using the windows element (the whole document) as reference. you can position it using css like "top, left, right, bottom". You can define if other elements are on top of it or under it using "z-index".

• position: absolute an element defined as absolute will ignore all the blocks defined in the page and will position itself using its nearest parent that IS NOT position: static as a reference. You can position it using css like "top, left, right, bottom". You can define if other elements are on top of it or under it using "z-index".

• position: relative can be defined as an hybrid between absolute and static. The element will take in account the blocks that are near itself to find its position in the document. however, you can modify that position using "top, left, right, bottom", but that position will use as a reference the original place the element was located. This type of elements can also use "z-index".

Overall, position relative has properties from "absolute" and "static". I have yet to see a "position: relative" element in where using "top, bottom, left, right" is justified, because makes the element to be less predictable, and you can displace it using padding or margins instead.

Usually, position relative elements are defined not because you can position them with "top, left, right bottom" but because making them relative will let you position elements inside of them with "position: absolute" taking the relative element as reference.

Most of the problems I have found that confuse people is due the name they have: "absolute" looks like you will position the element taking in account only the windows, and "relative" sounds like you are using other element as base. However, the truth is that "absolute" is not absolute at all, it takes is position in relation of other element.

edit: as geeksamu mentions, the "icon" is a class, so it should have a dot before.

Answer 2

I think the problem with your code at

.provContactSelector {
    icon {

icon is a class so it should be .icon not just icon

Answer 3

With the settings you use, the element will be moved 50px left of its original position, because you use position: relative; and right: 50px (ie right border 50px away from original right border). To achieve what you describe, you should use position: absolute; . But note that for the absolute position to relate to the parent element , the parent element needs to have position: relative; .