Positioning elements in CSS

December 2016
Using style sheets along with the <SPAN> and <DIV> tags, you can specify the location of text or images down to the pixel.
This is possible with versions 4 and higher of Netscape and Internet Explorer; however, the technique is still problematic and may cause some compatibility issues.

Relative and absolute positioning

Absolute positioning {position: absolute} is determined relative to the upper-left corner of the browser window. The coordinates of a point are given from top to bottom (top) and from left to right (left).

Relative position is defined in relation to other page elements, meaning that the elements contained in the DIV or SPAN tags will be positioned based on the HTML elements preceding them.

Positioning text

Let's place the text "How does it work?" 80 pixels from the top of the window and 100 pixels from the left:

<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;">

How does it work?
</SPAN>
</BODY>
</HTML>

There are other ways to do this, such as:

<HTML>
<HEAD>
<STYLE>
<!--
.test{position: absolute; top: 80px; left: 100px; color: black; font-size: x-large}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class=test>
How does it work?
</DIV>
</BODY>
</HTML>

Positioning an image

Let's place the image "test.jpg" 80 pixels from the top of the window and 100 pixels from the left (the image is 103x61):

<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
</BODY>
</HTML>

It is important to specify the size of the image in style sheets, to reduce the risks of browser incompatibility.

Superimposing elements

Let's superimpose the text "How does it work?" on top of the image "test.jpg":

<HTML>
<BODY>
<SPAN style="position: absolute; top: 30 px; left: 100px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
<SPAN style="position: absolute; top: 50 px; left: 100 px;">
How does it work?
</SPAN>
</BODY>
</HTML>

Using this syntax, you can superimpose both text elements and images.


Related :


Posicionamiento de los elementos en CSS
Posicionamiento de los elementos en CSS
Mit CSS Elemente positionieren
Mit CSS Elemente positionieren
Positionner des éléments grâce aux CSS
Positionner des éléments grâce aux CSS
Posizionare degli elementi con CSS
Posizionare degli elementi con CSS
Posicionar elementos graças ao CSS
Posicionar elementos graças ao CSS
MP3
MP3
This document entitled « Positioning elements in CSS » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.