I want to align a text or image anywhere on the screen for example:
Um texto aqui outro
outro aqui e aqui
I want to align a text or image anywhere on the screen for example:
Um texto aqui outro
outro aqui e aqui
To position elements arbitrarily anywhere on the screen you can use the style position
with fixed
(position relative to body ). The latter, the element will be fixed on the screen, that is, if there is scroll , it will not move.
In addition to position
, you use two more styles, top
(distance from top) and left
(distance from left).
There is also
position: absolute
that does not make the element fixed, but it will position itself within the parent-element if it has set someposition
(absolute
,relative
orfixed
). If not, it will be based onbody
or, if there is, the first element above the tree that has one of the above styles.
Example with fixed
:
span{
position: fixed;
}
<span style="top: 0; left: 50px;">Um texto aqui outro</span>
<span style="top: 100px; left: 20px;">outro aqui</span>
<span style="top: 100px; left: 500px;">e aqui</span>
Example with absolute
:
span{
position: absolute;
}
<span style="top: 0; left: 50px;">Um texto aqui outro</span>
<span style="top: 100px; left: 20px;">outro aqui</span>
<span style="top: 100px; left: 500px;">e aqui</span>
As stated, absolute
does not make the element fixed and positions itself within the parent element . In the above example, since the elements are not within a specific element, they are positioned based on body
.