W3C home > Mailing lists > Public > www-style@w3.org > September 2007

Re: Positioned elements

From: <Eugen.Konkov@aldec.com>
Date: Fri, 21 Sep 2007 10:57:45 +0300
Message-ID: <00f301c7fc25$19c04910$0100a8c0@kharkov.localhost>
To: "Alex Mogilevsky" <alexmog@exchange.microsoft.com>
Cc: <www-style@w3.org>
Yes, It is I am looking for
<table border=1><tr>
  <td>HELLO</td><td>HELLO</td>
  </tr>
<tr>
  <td>HELLO</td><td style="position: relative;">HELLO<select 
style="position: absolute; left:0px; top:0px; background: 
red;"></select></td>
  </tr>
</table>

I have re-read CSS2 specification and find out that:
http://www.w3.org/TR/CSS2/visuren.html#relative-positioning
Relatively positioned boxes keep their normal flow size, including line 
breaks and the space originally reserved for them. A relatively positioned 
box establishes a new a new containing block for normal flow children and 
positioned descendants.

9.8.4 Absolute positioning
.........
The following example shows an absolutely positioned box that is a child of 
a relatively positioned box. Although the parent outer box is not actually 
offset, setting its 'position' property to 'relative' means that its box may 
serve as the containing block for positioned descendants. Since the outer 
box is an inline box that is split across several lines, the first inline 
box's top and left edges (depicted by thick dashed lines in the illustration 
below) serve as references for 'top' and 'left' offsets.

#outer {
  position: relative;
  color: red
}
#inner {
  position: absolute;
  top: 200px; left: -100px;
  height: 130px; width: 130px;
  color: blue;
}

I have test this in other browser (IE) than mine (FF) and IE looks to work 
right


Thank you very much for help

----- Original Message ----- 
From: "Mikko Rantalainen" <mikko.rantalainen@peda.net>
To: <www-style@w3.org>
Sent: Thursday, September 20, 2007 10:52 AM
Subject: Re: Positioned elements


  ----- Original Message ----- 
  From: Alex Mogilevsky 
  To: Eugen.Konkov@aldec.com 
  Cc: www-style@w3.org 
  Sent: Thursday, September 20, 2007 12:40 PM
  Subject: RE: Positioned elements


  As Mikko points you can in fact make any element relative (with no offset) which doesn't change its position but makes it a positioning parent. I am sure there are scenarios where it is not an option but so far I have not seen one that would be important enough to add complexity of another positioning option...

  (who am I to say, now that i've written a module for grid positioning. but that is really addressing scenarios which are not possible with existing properties)...

------------------------------------------------------------------------------
  From: Eugen.Konkov@aldec.com [Eugen.Konkov@aldec.com]
  Sent: Wednesday, September 19, 2007 11:23 PM
  To: Alex Mogilevsky
  Subject: Re: Positioned elements


  It will possible to position element relative to its parent (see image #1), not 'relative' where positioning relative to previous sibling (see image #2) and not 'absolute' where positioning is relative to parent element with 'absolute positioning' (see image #3)
    ----- Original Message ----- 
    From: Alex Mogilevsky 
    To: Eugen.Konkov@aldec.com ; www-style@w3.org 
    Sent: Wednesday, September 19, 2007 8:33 PM
    Subject: RE: Positioned elements


    Would it achieve something that is not possible today?



    From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of Eugen.Konkov@aldec.com
    Sent: Wednesday, September 19, 2007 1:54 AM
    To: www-style@w3.org
    Subject: Positioned elements



    Is you plan to add ability to position element relatively to its parent

    NOT to its position in normal flow (relative)

    NOT to its containing block (absolute)



    <div style="position: absolute; left: 50px; top: 150px; border: 1px solid red;">
    TESTCASE #2
    <table border=1><tr>
      <td>HELLO</td><td><div style="position: absolute; left:40px; top:12px; background: red;">aa</div></td>
      </tr>
    <tr>
      <td>HELLO</td><td>HELLO<select style="position: parent; left:0px; top:0px; background: blue;"></select></td>
      </tr>
    </table>
    </div>



    So its look like this:





    And NOT:



    like in 'relative' positioning



    And NOT:



    like in 'absolute' positioning





    __________ NOD32 2540 (20070919) Information __________

    This message was checked by NOD32 antivirus system.
    http://www.eset.com



  __________ NOD32 2541 (20070920) Information __________

  This message was checked by NOD32 antivirus system.
  http://www.eset.com




image001.png
(image/png attachment: image001.png)

image002.png
(image/png attachment: image002.png)

image003.png
(image/png attachment: image003.png)

Received on Friday, 21 September 2007 07:58:35 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:52 GMT