CSS-Positioning-101/5.inherit_pos.html at master · pilap82/CSS-Positioning-101 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
	<title>Inherit Positioning</title>
	<style>

	/* Using inherit as the position tells the browser you want that element to inherit the same position type as the element it is contained within ("parent element").
	You can just as easily specify the position of the child element as the type you wish it to inherit and it will have the same effect as using inherit.
	Also be aware that children elements are positioned with a coordinate system relative to their parent rather than the whole browser window.
	 */

		#outer_box {
			position: absolute;
			width: 300px;
			height: 300px;
			background: #ee3e64;
			top: 0;
			left: 50%;
		}
		#inner_box {
			background: #44accf;
			position: inherit; /* removing this line would make inner_box default to static, causing the two inner_box elements to stack in the y-axis direction rather than overlap in the z-axis direction */
			top: 0;
			left: 0; /* notice that becuase inner_box is a child element of outer_box left: 0; positions it 0 from the left relative to the outer box rather than being 0 left of the browser. It inherits the left: 50% position when thinking of 				it in context of the entire window*/
			width: 150px;
			height: 150px;
		}
	</style>
</head>
<body>
	<div id="outer_box">
		outer
		<div id="inner_box">
			Inner 1
		</div>
		<div id="inner_box">
			Inner 2
		</div>
	</div>
</body>
</html>