csswg-drafts/css-regions-1/examples/linked-boxes.html at 99b9ea16eadc2d095094ecc9411535a6a20acd57 · w3c/csswg-drafts · 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title></title>
  <style>
  	body {
  		width: 170px;
  		-border: thin black solid;
  		padding: 10px;
  		position: relative;
  		font-family: sans-serif;
  	}
		aside {
			border: thin black solid;
			border-radius: 10px;
			background-color: lightgreen;
			text-align: center;
			margin: 0px 40px;
			font-size: 24px;
		}
		article {
			font-size: 10px;
			-webkit-flow-into: article-flow;
		}
		.off-screen {
			position: absolute;
			top: 250px;
			left: 0px;
			width: 190px;
			height: 175px;
			background-color: lightgray;
			opacity: .5;
			z-index: 1;
		}
		.region {
			-webkit-flow-from: article-flow;
		}
		.top {
			max-height: 200px;
		}
  </style>
</head>
<body lang="en">
	<div class="off-screen"></div>
  <article>
  	<h1>Article</h1>
  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, cupiditate rerum et commodi ea repellat placeat exercitationem perferendis assumenda voluptatibus. Aliquam, consectetur sed fuga praesentium velit. Necessitatibus, nostrum doloremque eius.</p>
  	<p>Tur? Henis eictur aut veliqui audaes senia placeresci dolum num aut utam, volor sum re inctatiat pero volut evel in res vel eos ea velectempos et a sum voloribus elit, optas rerro blabore am volorese poria parit aut ute conse et quo venimint accum vollupta veligna tquati conse evendi nem eos et, eat lant.
		<p>Necta sequam quas voloreperum cust rem quas simus. Eveliquam repre que ipsum sincte con eumetur?
		<p>Estet aut eicipsa parum, sus, suntece rionesecta commolo rionem destruptat hari omniendam quaspe voloreh endeliquos cum nonse pos vellati di dolupta tempedis eata nimperempos es dicient volor acienieni quisqua spernat.
  </article>
  <div class="top region"></div>
  <aside>Aside</aside>
  <div class="region"></div>
</body>
</html>