CODEWITHSUNDEEP
htmlcssposition
user1117313
user1117313

Reputation: 1985

CSS absolute position

If an HTML element has following CSS property, what would be its position on the screen?

position: absolute; 
bottom: 0; 
left: 0; 
right: 0; 
top: 0;

Upvotes: 0

Views: 2760

Answers (7)

Pencho Ilchev
Pencho Ilchev

Reputation: 3241

If height and width are specified, it will be top left in all major browsers. If top is not specified, then it will be bottom left. In other words, top takes precedence over bottom and left takes precedence over right.

If you don't have height and width set (defaulting to auto), then the the top, bottom, left and right are used to calculate them. If your parent container is 20px by 20px and you have:

{
top: 5px;
bottom:0;
left:5px;
right:0;
position:absolute;
}

then the element will be 15px by 15px, i.e.

([height of parent] - [top] - [bottom] by [width of parent] - [left] - [right])

positioned at top: 5px left:5px within the parent container.

Upvotes: 1

sandeep
sandeep

Reputation: 92853

If this code

 div{   
   position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 0; 
}

in the css means it's takes the entry width & height of the screen or it's parent.

you can achieve same effect with width:100% & height:100%; like this:

div{   
       position: absolute; 
        width:100%;
        height:100%;
        top:0;
        left:0;
    }

but both have major difference in first example if you add padding & border on the element then they are not add to width & height to that element but in second they add padding & border value in the height & width.

Check these two example in which only padding & border create huge different.

http://jsfiddle.net/qzNKd/2/

&

http://jsfiddle.net/FQLdm/3/

Upvotes: 0

Waiting for Dev...
Waiting for Dev...

Reputation: 13037

The element will fill the entire containing block content area. Its content area is defined by width and height, and no padding or anything else. Its containing block is nearest positioned -non static- ancestor.

For instance, top: 0 is saying to the element to have an offset 0 from the top of its containing block. So to start at the begining of its content area. And bottom: 0 is saying to spread the length until reach left extrem of the content area.

The same for right and left.

Of course, second declaration is ignored if you declare an explicit width or height.

It do make sense. As the specification says:

The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

Link to specification

The key is possibly size.

Upvotes: 0

Anders Marzi Tornblad
Anders Marzi Tornblad

Reputation: 19345

It seems that most browsers actually has the element fill the window (or the parent element, if the parent element has absolute or relative position)

If you add a width declaration to the CSS, however, the left will be enforced and the right will be ignored.

If you add a height declaration, the bottom will be ignored.

http://jsfiddle.net/tjFvL/

Upvotes: 0

Pradeep Singh
Pradeep Singh

Reputation: 3634

Its working as

position:absolute; 
left: 0;
top: 0;

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201866

Its top left corner will be in the top left corner of the enclosing positioned element or, in the absence of such an element, in the top left corner of the canvas. Its width and height will be the same as those of the enclosing positioned element (or the canvas).

Upvotes: 0

user527892
user527892

Reputation:

It would fill its parent container. The position on the screen would therefore be top/left: 0, 0

Upvotes: 1

Related Questions