How exactly does absolute position element behaves inside a static parent

Question

I ask this question because yesterday I had to style several divs as it\'s shown in this JSFiddle example.

The tricky part for me was to position

Answer 1

CSS position

• position: static is default, and places the elements in order, one after another, according to their display property. There's little practical purpose on manually setting an element to static.
• position: relative works much like static, however the elements inside a relative parent have their top, left, bottom and right values relative to the first non-static parent. This can be seen when you get the offset position of an element via JavaScript, or set it with either CSS or JavaScript.
• position: absolute makes the element be placed relative to or the first relatively or absolutely positioned parent element. This means its position should be set with top, left, bottom, right CSS properties, that are counted starting from the first relative or absolute ancestor element.

Your mistake was not setting top nor left CSS properties to the

. Hope this little explanation lit you up! Best of luck.

0 讨论(0)

查看其它2个回答

发布评论:

提交评论

---

•  加载中...