Files
The Coding Aviator 65f58cf9c7 Added solution to Move a Relatively Positioned Element with CSS Offsets (#34305)
* Update index.md

* Update index.md
2019-03-09 06:05:30 -08:00

1.6 KiB

title
title
Move a Relatively Positioned Element with CSS Offsets

:triangular_flag_on_post: Remember to use Read-Search-Ask if you get stuck. Try to pair program :busts_in_silhouette: and write your own code :pencil:

Move a Relatively Positioned Element with CSS Offsets

:speech_balloon: Hint: 1

Use the left property for offsetting the element right.

try to solve the problem now

:speech_balloon: Hint: 2

Use the bottom property for offsetting the element top.

try to solve the problem now

Spoiler Alert!

warning sign

Solution ahead!

The following lines of code solves the challenge:

<head>
<style>
  h2 {
    position: relative;
    left: 15px;
    bottom: 10px;
  }
</style>
</head>
<body>
  <h1>On Being Well-Positioned</h1>
  <h2>Move me!</h2>
  <p>I still think the h2 is where it normally sits.</p>
</body>

Code Explanation:

  • The h2{} selects the h2 element.
  • left: 15px; offsets the h2 15px to the right.
  • bottom: 10px; offsets the h2 10px to the top.