ptg16476052296 LESSON 11: Using CSS to Position Elements on the Page
to the element in which the element is nested. This explains why you may want to
position an element even if you don’t specify attributes to alter its position. Doing so
enables you to make it easier to position nested elements.
Let’s look at an example of how you might take advantage of nesting. You may have
seen websites where you can add annotations to images, drawing boxes and adding notes.
In this example, I’m going to illustrate how to design images with annotations of that
kind, along with how to prevent the annotations from being displayed except when you
want to see them.
The web page in Figure 11.5 includes a <div> containing an image and a note I’ve
applied to that image. Here’s the source code for the page:
<!DOCTYPE html>
<html>
<head>
<title>Image Notes</title>
<style type="text/css">
#picture {
position: relative;
width: 500px;
}#picture img {
width: 500px;
margin: 0;
padding: 0;
}#note1 {
position: absolute;
border: 2px solid black;
width: 340px;
height: 300px;
top: 40px;
left: 40px;
text-align: right;
}</style>
</head>
<body>
<h1>Claude Monet The Bridge at Argenteuil</h1>
<div id="picture">
<img src="monet.jpg"><div id="note1">
This is a boat!
</div>