Absolute & Relative Positioning
Read and Understand
Read and understand the code on the following page before attempting this activity: https://www.understandingcode.com/absolute-positioning-example/
Activity
Here you can test out what you read, and achieve badges.
Activity Instructions
Match the image using by using a combination of relative and absolute positioning:
- Don't delete any of the HTML or CSS
- Use absolute positioning for each of the corner boxes
- Don't use any values over 50px (margins, padding, offsets, etc)
HTML
1
<div id="example2">
2
<img src="https://www.understandingcode.com/wp-content/uploads/2015/10/burger.jpg" alt="burger picture"/>
3
<p id="corner1">Corner 1</p>
4
<p id="corner2">Corner 2</p>
5
<p id="corner3">Corner 3</p>
6
<p id="corner4">Corner 4</p>
7
</div>CSS
1
div{2
display: inline-block;
3
background: blue;
4
}
5
6
p{7
color: white;
8
font-weight: bold;
9
font-size: 1em;
10
text-shadow: 2px 2px 5px black;
11
background: #c33127;
12
padding: 10px;
13
display: inline-block;
14
margin: 0px;
15
}
16
17
#corner1{18
19
}
20
21
#corner2{22
23
}
24
25
#corner3{26
27
}
28
29
#corner4{30
31
}
JavaScript
1
</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script>