04ae3c60e8
CLOSED TREE Backed out changeset 16db55b642a9 (bug 1269046) Backed out changeset a0008dd33cf4 (bug 1269046) Backed out changeset 75b58c4e61e6 (bug 1269046) Backed out changeset fb7655f3e1cf (bug 1269046) Backed out changeset 8088e5a9e6e3 (bug 1269046) Backed out changeset eea6479452f0 (bug 1269046) Backed out changeset eb4b52bf06ec (bug 1269046) Backed out changeset 539db74e4a88 (bug 1269046) Backed out changeset f57f9ac1435e (bug 1269045) Backed out changeset 2162d5c9fb54 (bug 1269045) Backed out changeset 7aa8199183fc (bug 1269045) Backed out changeset 86a391e3e163 (bug 1269045) MozReview-Commit-ID: HYL7Bh8l02E
74 lines
2.1 KiB
HTML
74 lines
2.1 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!--
|
|
Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/
|
|
-->
|
|
<!-- Reference case for fixed-position children of a flex container. -->
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<style>
|
|
div.containingBlock {
|
|
top: 15px;
|
|
left: 20px;
|
|
height: 400px;
|
|
position: absolute;
|
|
border: 2px dashed purple;
|
|
}
|
|
.fixedpos {
|
|
position: fixed;
|
|
border: 2px dotted black;
|
|
}
|
|
div.flexbox {
|
|
width: 200px;
|
|
height: 100px;
|
|
}
|
|
div.a {
|
|
width: 100%;
|
|
height: 100px;
|
|
background: lightgreen;
|
|
display: inline-block;
|
|
}
|
|
div.b {
|
|
width: 100%;
|
|
height: 100px;
|
|
background: yellow;
|
|
display: inline-block;
|
|
}
|
|
div.inflex {
|
|
width: 20px;
|
|
height: 100px;
|
|
background: gray;
|
|
display: inline-block;
|
|
}
|
|
div.noFlexFn {
|
|
width: 15px;
|
|
height: 15px;
|
|
background: teal;
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="containingBlock">
|
|
<!-- First child fixedpos: -->
|
|
<div class="flexbox"
|
|
><div class="a fixedpos" style="width: 30px"/><div class="b"/></div>
|
|
<!-- Second child fixedpos: -->
|
|
<div class="flexbox"
|
|
><div class="a"/><div class="b fixedpos" style="width: 20px"/></div>
|
|
<!-- Middle child fixedpos: -->
|
|
<div class="flexbox"
|
|
><div class="a" style="width: 80px"
|
|
/><div class="inflex fixedpos"
|
|
/><div class="b" style="width: 120px"/></div>
|
|
<!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
|
|
<div class="flexbox"
|
|
><div class="inflex" style="margin-left: 12px"
|
|
/><div class="inflex" style="margin-left: 24px"
|
|
/><div class="inflex" style="margin-left: 24px"
|
|
/><div class="noFlexFn fixedpos" style="margin-left: 24px"
|
|
/><div class="inflex" style="margin-left: 48px"/></div>
|
|
</div>
|
|
</body>
|
|
</html>
|