Specifying Element Position - HTML

Element positioning can be controlled by four positioning properties: top, right, bottom, and right. The effect of these properties on the element’s position is largely driven by the type of positioning being used on the element. The positioning properties have the following format:

side: length | percentage ;

The specified side of the element is positioned according to the value specified. If the value is a length, the value is applied to the reference point for the positioning model being used—the element’s normal position if the relative model is used, the view port if the absolute or fixed model is used. For example, consider the following code:

position: relative; right: 50%;

These settings result in the element being shifted to the left by 50% of its width. This is because the user agent is told to position the right side of the element 50% of where it should be.;

A relative, 50%right value results in an element being shifted to the left by 50% of its width.

 A relative, 50%right value results in an element being shifted to the left by 50% of its width.
However, if the following settings are used, the element is positioned with its right side in the middle of the view port:

position: absolute; left: 50%;

An absolute, 50%left value results in an element being shifted so its left side is in the middle of the view port.

An absolute, 50%left value results in an element being shifted so its left side is in the middle of the view port
Here, the user agent references the positioning against the view port, so the element’s right side is positioned at the horizontal 50% mark of the view port.

Note:Positioning alone can drive the element’s size. For example, the following code will result in the element being scaled horizontally to 25% of the view port, the left side positioned at the 25% horizontal mark, and the right at the 50% horizontal mark.

position: absolute; left: 25%; right: 50%;

However, whichever property appears last in the definition drives the final size of the element. For example, the following definition will result in an element that has its left side positioned at the view port’s horizontal 25% mark, but is 300 pixels wide (despite the size of the view port):

position: absolute; left: 25%; right: 50%; width: 300px;

The width overrides the right setting due to the cascade effect of CSS.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics