Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-position/position-absolute-in-inline-margin-top.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Position: absolute inside block with margin-top inside inline</title>
<link rel="match" href="../CSS2/reference/ref-filled-green-100px-square.xht">
<meta name="assert"
content="Absolutely positioned elements inside a block with margin-top that is inside an inline formatting context should have their static position correctly offset by the margin-top.">
<style>
.wrapper {
display: flow-root;
margin-top: -100px;
}
.abspos {
position: absolute;
background: green;
width: 100px;
height: 100px;
}
.red {
position: absolute;
background: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="red"></div>
<div class="wrapper">
<span>
<div style="margin-top: 100px">
<div class="abspos"></div>
</div>
</span>
</div>