Positioning text inside div

Question

I have a popup with some information.
I like to have the word "Actief" at the top right corner of the popup (always).
But it doesn't work with margin or padding.
The Image is blocking the word.
This is what I tried.
<h6 style="color: Green;float: right;/* position: absolute; */z-index: 9999999999999999;margin-top: 0px;display: block;/* margin-bottom: 60px; */">Actief</h6>

My complete file: https://jsfiddle.net/oynrwo4c/

Answer 1

You will need to position it absolutely by adding the following styles:

.popup_body {
  position:relative;
}

And then give the h6 position:absolute; top: 0; and right:0; This will ensure it is always in the top right corner.

Here is a link to the updated fiddle with my code suggestions.

Answer 2

You have to use position: absolute to the same element for it to position itself as per the viewport.

Provide the following css to the Actief element:

h6 {
  color: Green;
  position: absolute;
  z-index: 9999999999999999;
  margin-top: 0px;
  display: block;
  right: 0;
  top: 0;
}

Check fiddle: https://jsfiddle.net/oynrwo4c/5/

Answer 3

'Absolute' value of 'position' property lets us place the element by settings offsets of its closest positioned ancestor (by 'positioned' I mean the one with 'position' value other than 'static' (default)).

<h6 style="color: Green; position: absolute; top: 10px; right: 10px; margin: 0;">Actief</h6>

As you see I set the position absolute to the element and 'top' and 'right' properties. You can alter their values to get the offsets you want.

JS fiddle link: https://jsfiddle.net/La5j71qs/2/

Answer 4

You need to use a position: fixed; style for your html element first. and then you can use top / left with settings for pixels, percentage or viewport to set where you want it to be and what to depend on.

example: Jsfiddle

<h6 style="color: Green; position: fixed; top: 20vh; left: 25vw; height: auto; margin: auto;">Actief</h6>

You can read more about this: css position