| <!DOCTYPE html> |
| <!-- |
| | Test flexbox containers with absolute positioning. |
| --> |
| <html><head> |
| <style type="text/css"> |
| body { |
| margin: 0px; |
| background-color: white; |
| font-family: Roboto; |
| font-size: 16px; |
| } |
| .container { |
| display: flex; |
| justify-content: flex-start; |
| align-items: flex-start; |
| border: 5px solid green; |
| width: 40px; |
| height: 50px; |
| padding: 4%; |
| top: 30px; |
| left: 20px; |
| margin: 1%; |
| } |
| .column { |
| flex-direction: column; |
| } |
| .absolute { |
| position: absolute; |
| } |
| .fixed { |
| position: fixed; |
| } |
| .relative { |
| position: relative; |
| } |
| .static { |
| position: static; |
| } |
| .container > div { |
| padding: 5px; |
| width: 5px; |
| height: 20px; |
| text-align: center; |
| border: 2px solid blue; |
| background: green; |
| flex: 1 0 auto; |
| } |
| .column > div { |
| background: #80ff80; |
| } |
| .containingblock { |
| display: inline-block; |
| position: relative; |
| width: 80px; |
| height: 190px; |
| background-color: yellow; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="containingblock"> |
| <span class="relative container"> |
| <div>AA</div> |
| </span> |
| </div> |
| <div class="containingblock"> |
| <span class="static container"> |
| <div>BB</div> |
| </span> |
| </div> |
| <div class="containingblock"> |
| <span class="absolute container"> |
| <div>CC</div> |
| </span> |
| <span class="fixed container"> |
| <div>DD</div> |
| </span> |
| </div> |
| <div class="containingblock"> |
| <span class="relative column container"> |
| <div>a</div> |
| </span> |
| </div> |
| <div class="containingblock"> |
| <span class="static column container"> |
| <div>b</div> |
| </span> |
| </div> |
| <div class="containingblock"> |
| <span class="absolute column container"> |
| <div>c</div> |
| </span> |
| <span class="fixed column container"> |
| <div>d</div> |
| </span> |
| </div> |
| </body></html> |