css3-trans-an/nested-fixed.html

<!DOCTYPE html>
<html>
<head>
<title>Nested Fixed</title>
<style type="text/css" media="all">

.outer:before, .inner:before {content: attr(class); font-style: italic;}
.inner {position: fixed; top: 0;}
.outer {width: 200px; height: 200px; background: green;}
.inner {width: 100px; height: 100px; top: 100px; background: blue;}
.div2 .inner {background: red;}
.outer .inner {left: 50px;}
.outer .inner + .inner {left: 200px;}

.div2 {-webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg);}

p {margin: 0.5em; color: #CCC;}
</style>
</head>
<body>

<div class="outer div1">
Outer div.
<div class="inner">
Inner div 1.
</div>
<div class="inner">
Inner div 2.
</div>
More outer div.
</div>

<div class="outer div2">
Outer div.
<div class="inner">
Inner div 1.
</div>
<div class="inner">
Inner div 2.
</div>
More outer div.
</div>

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

</body>
</html>