CODEWITHSUNDEEP
htmlcsscss-position
user3171894
user3171894

Reputation:

css position absolute with top and bottom both

I am using position: absolute; on a div.

fiddle

My code is: 

.ab {
  background: none repeat scroll 0 0 #FF0000;
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100px;
}

I want to know why is it on top even if I specified bottom: 0? Is there any priority issue between top and bottom ? Or what is the reason?

Upvotes: 13

Views: 13538

Answers (5)

5260452
5260452

Reputation: 11598

From Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/top

When both top and bottom are specified, as long as height is unspecified, auto, or 100%, both top and bottom distances will be respected. Otherwise, if height is constrained in any way, the top property takes precedence and the bottom property is ignored.

In your example, you've declared a set height as well as both a top and bottom position, so the top position takes precedence, and the bottom is ignored (and regardless of the order you list top and bottom).

Upvotes: 17

SlyBeaver
SlyBeaver

Reputation: 1312

Yes. All browsers start counting coordinate from top of the page. You have a top property and height property. First set the top position of the element then his height and then bottom position.

If you remove height property - your block be from top to bottom. (100% height);

Upvotes: 2

Dino
Dino

Reputation: 806

Yes top: has higher priority than bottom: if you are using both top and bottom. It will allign to the value given by top.

Top and Left has more priority

Upvotes: 1

Ryan Mitchell
Ryan Mitchell

Reputation: 744

Top and left take priority over bottom and right.

But note that you're only seeing this behavior because you specified a height. If you had specified top: 0 and bottom: 0 without a fixed height, then the div would stretch from top to bottom of its first ancestor with non-static positioning. Specify all four without height or width, and it will fill the whole available area of that parent, as you can see in this jsFiddle.

Upvotes: 7

Nick Coad
Nick Coad

Reputation: 3694

CSS prioritises top/left over bottom/right. If you provide both, it will use top/left instead of bottom/right.

There's no legitimate case for providing both (if you have a defined height and width) though.

Upvotes: 1

Related Questions