D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
clhenrick
Full window
Github gist
mfa dt bootcamp web class css positioning example 3: relative with child
<!doctype html> <!-- Credit:These positioning examples are credited to Noah Stokes' blog post on A List Apart, CSS positioning 101: https://alistapart.com/article/css-positioning-101 --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>box inside a box positioned relative</title> <style> /* CSS hasn't changed! */ .box { position: relative; /* positioning our boxes relative */ width: 200px; height: 200px; } #box_1 { background: #ee3e64; } #box_2 { background: #44accf; left: 200px; /* use the left offest property to shift the box over*/ } #box_3 { background: #b7d84b; } </style> </head> <body> <h1>3 boxes positioned relative</h1> <h3>The second box has left: 200px, and it is inside of box 1</h3> <h3>The CSS has not changed. The second box uses it's parent, the first box, as it's coordinate reference.</h3> <div id="box_1" class="box"> <div id="box_2" class="box"></div> <!-- Now we have a box inside a box --> </div> <div id="box_3" class="box"></div> </body> </html>