blob: 456dafa9052e30c2929950e8bfbf21f6c30be847 [file] [log] [blame]
<!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>