Absolute positioning within inline elements. Is this behaviour correct?
考虑以下简单的HTML和CSS
a.rel{
position:relative;
}
button{
position:absolute;
top:0;
left:0;
}Lorem ipsum dolor sit amet
<a class="rel" href="https://www.google.co.uk">
<img src=
"https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<button>I'm a button</button>
</a> The height of an inline box (that is, a box generated by an element with display: inline ) is determined by the strut, which is an imaginary box that's tall enough to contain text in the computed font-size . See §10.6.1 and §10.8.1, as well as the line-height propdef (although note that line-height determines the height of the line box on which the inline box appears, not the inline box itself).
Notably, an inline-level child does not affect the height of its parent inline box, even if that child is taller than the strut. The position of the button is therefore relative to the strut of the a element. This also means that the position of the button would be the same if the image were not present to begin with:
a.rel{
position:relative;
}
button{
position:absolute;
top:0;
left:0;
}Lorem ipsum dolor sit amet
<a class="rel" href="https://www.google.co.uk">
<!-- img src=
"https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" -->
<button>I'm a button</button>
</a> The button IS on the top-left of the link. You're mistaken, however, about the size of the link. As a has display inline by default, its size doesn't increase by the size of the img , instead its just the line-height (determined by the font size).
If you increase the font-size of the link element, the button will therefore go up.
You may use the dev tools to easily view the exact dimensions of the link element.
链接地址: http://www.djcxy.com/p/92802.html