2️⃣

5.2 Positioning

CSS position Property

The position property specifies the type of positioning method used for an element (static, relative, absolute, or fixed).

image

CSS top Property

The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

  • If position: absolute; or position: fixed; - the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.
  • If position: relative; - the top property makes the element's top edge to move above/below its normal position.

Right, bottom, and left properties have similar effects.

CSS z-index Property

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed).

image

Previous Section

Next Section

⚖️

Copyright © 2021 Code 4 Tomorrow. All rights reserved. The code in this course is licensed under the MIT License. If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.