I just noticed this issue after an auto update to Chrome 32.0.1700.77. I can set top
, left
, and bottom
in an absolutely-positioned input element, however right: 0
is ignored. Here's my code:
<div id="content">
<input type="search"/>
</div>
#content {
position: relative;
top: 24px;
height: 24px;
background-color: gray;
}
#content input[type="search"] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* width 100%; */
}
Fiddle: http://jsfiddle.net/hAuSL/4/
It was working as expected before the update. I also see this issue in Firefox (26.0) but not in Opera (18.0.1284.68) or Safari (7.0.1 (9537.73.11)).
I can work around it by adding width: 100%
to the input element style; but I'm wondering, is there something wrong with the CSS or is this a browser issue?
Thanks in advance for any insights.
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.
If the element is position absolutely, then it isn't relative, or in reference to any object - including the page itself. So margin: auto; can't decide where the middle is.
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
You set z-index on a static element By default, every element has a position of static. z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
It's not a bug, see how absolutely positioned replaced elements' width is computed:
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
The used value of 'width' is determined as for inline replaced elements.
http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width
if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'.
At this point the element dimensions are over-constrained (it has width
, left
and right
) so the following rule applies:
ignore the value for either 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
It's what you see, right is ignored. As <input>
always have a default width you should set yours (100% in this case) and remove the right
rule.
For a more generic solution you can wrap the replaced element in any non-replaced element (like a <div>
) which will be absolutely positioned with left
and right
, then you can set the wanted width for the other element (be careful, if the box-model is content-width
the width
value will be added to any padding and border).
See http://jsfiddle.net/2UaYm/ for example.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With