CODEWITHSUNDEEP
csspositionpositioning
technillogue
technillogue

Reputation: 1571

What are the CSS positioning properties relative to with position: absolute?

I know that bottom, top, left, and right with position: absolute sets that edge of the element to some distance away from that edge of the parent element. But how is the edge of the parent defined? Where is it in the box model? Does it include the border or the margin? The padding?

Upvotes: 1

Views: 96

Answers (1)

jamesplease
jamesplease

Reputation: 12869

It's within the border, but ignores the padding.

Let's show it with an example. View on JSFiddle

HTML

<div>
  <span>absolute</span>
  regular
</div>​

CSS

div {
  position: relative;
  top: 50px;
  left: 50px;
  background: #eee;
  padding: 15px;
  width: 100px;
  height: 100px;
  border: 5px solid #222;
}
span { 
  position: absolute;
  top: 0;
  left: 0;
}​

Of course, an absolutely positioned element is positioned in relation to the first parent it comes across that is positioned with anything other than static. If the div in my example had no position set, the body of the fiddle would be used as that parent.

Upvotes: 2

Related Questions