Exercise v2.2

Exercise:

Position the element with the "topleft" class 30px from the left, and 15px from the top, relative to its container.

Hint: Use position: absolute.

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
}

.topleft {
    font-size: 18px;
}

img {
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<div class="container">
  <img src="trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="topleft">Top Left</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
}

.topleft {
    position: absolute;
    left: 30px;
    top: 15px;
    font-size: 18px;
}

img {
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<div class="container">
  <img src="trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="topleft">Top Left</div>
</div>

</body>
</html>

Exercise:

Position the element with the "topleft" class 30px from the left, and 15px from the top, relative to its container.

Top Tutorials

Top References

Top Examples

Web Certificates