W3C home > Mailing lists > Public > www-style@w3.org > October 2013

[CSS21] Absolute positioning and float inherit on same element.

From: Alan Gresley <alan@css-class.com>
Date: Thu, 03 Oct 2013 22:28:33 +1000
Message-ID: <524D62F1.8070700@css-class.com>
To: CSS 3 W3C Group <www-style@w3.org>
Hello all,

Which browsers are showing the correct behavior for the following test case.

http://css-class.com/test/css/visformatting/float-computed-used.htm

When the viewport is approximately 1160px or narrower, the absolutely 
positioned box is positioned on the left edge of the viewport in 
Firefox, IE10 and Opera. In Chrome thought, the absolutely positioned 
box is always positioned on the the right edge of the viewport and 
overlaps the first element in the element on the right.

Alan


<!DOCTYPE html>

<style type="text/css">

.ref, .abs { float: right; }
.abs { position: absolute; top: 3em; right: 0; }
.fl { float: inherit; width: 25%; border: 10px solid blue; }
.abs .fl { background: rgba(255,255,0,0.5);}
</style>

<div class="ref"><div class="fl">This block must be on the right side of
the page.</div></div>
<div class="abs"><div class="fl">If this block is on the right side of the
page then the computed value of float is as specified; if it is on the
left side then the computed value of float is affected by
position:absolute.</div></div>


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Thursday, 3 October 2013 12:29:00 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:51:02 UTC