473,246 Members | 1,389 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,246 software developers and data experts.

Position relative to parent element

Hello

Reading the follwing document:
http://www.w3.org/TR/WD-positioning-970131#In-flow
it seems very clear that position:relative should be relative to the parent
element. So in the following test case element1 and element2 should be
placed side by side inside a centered white container element:

http://www.markusernst.ch/test.htm

General structure:
<container>
<element1 />
<element2 />
</container>

Anyway all browsers I can test (Firefox, IE6 PC, IE5 Mac, Opera, Safari)
position element2 relative to the bottom left corner of element1. (IE even
applies the centering inherited from the body, I left this in the example
for humour purposes only...)

So the generally accepted reference of relative positioning seems to be
rather the bottom left corner of the preceding element than the top left
corner of the parent element. Is this behaviour correct? And is there any
possibility to achieve a layout with a fixed size centered content area
without frames or layout tables? (I can't float the elements inside the
container, as some might overlap.)

--
Markus
Jul 21 '05 #1
3 19721
On Mon, 15 Nov 2004 16:22:34 +0100, "Markus Ernst"
<derernst@NO#SP#AMgmx.ch> wrote:
Reading the follwing document:
http://www.w3.org/TR/WD-positioning-970131#In-flow
it seems very clear that position:relative should be relative to the parent
element.
Read it again. An element with position: relative; is positioned
relative to it's default position in the flow.
So in the following test case element1 and element2 should be
placed side by side inside a centered white container element:

http://www.markusernst.ch/test.htm

General structure:
<container>
<element1 />
<element2 />
</container>
Not with your styles.

#element1 {
position:relative;
top:0px;
left:0px;
}
#element2 {
position:relative;
top:0px;
left:200px;
}

element1 will appear exactly where it would if there were no
positioning styles applied to it at all - because it's been moved 0px
to the left of where it was and 0px down.

element2 will appear on the same vertical level as its original
position (due to top: 0px;) and 200px to the left of its original
position (due to left: 200px;).

This is exactly what you see.

Anyway all browsers I can test (Firefox, IE6 PC, IE5 Mac, Opera, Safari)
position element2 relative to the bottom left corner of element1.

So the generally accepted reference of relative positioning seems to be
rather the bottom left corner of the preceding element than the top left
corner of the parent element. Is this behaviour correct?
No, you've totally misunderstood how relative positioning works.
And is there any
possibility to achieve a layout with a fixed size centered content area
without frames or layout tables? (I can't float the elements inside the
container, as some might overlap.)


#container {
position: relative;
}
#element1 {
width:200px;
height:150px;
position:absolute;
top:0px;
left:0px;
}
#element2 {
width:200px;
height:150px;
position:absolute;
top:0px;
left:200px;
}

The position: relative on the parent creates a new origin for the
absolute positioning of the child elements.

Steve

Jul 21 '05 #2
Steve Pugh wrote:
[...]
No, you've totally misunderstood how relative positioning works.
And is there any
possibility to achieve a layout with a fixed size centered content
area without frames or layout tables? (I can't float the elements
inside the container, as some might overlap.)


#container {
position: relative;
}
#element1 {
width:200px;
height:150px;
position:absolute;
top:0px;
left:0px;
}
#element2 {
width:200px;
height:150px;
position:absolute;
top:0px;
left:200px;
}

The position: relative on the parent creates a new origin for the
absolute positioning of the child elements.


I can't believe I thought I knew a lot about CSS for years but never
understood relative positioning. Thanks a lot for this clarification!

--
Markus
Jul 21 '05 #3
*Markus Ernst* <derernst@NO#SP#AMgmx.ch>:

Reading the follwing document:
http://www.w3.org/TR/WD-positioning-970131#In-flow


Why do you read some _Working Draft_ instead of the actual specification?

--
"Living in a vacuum sucks." - Adrienne E. Gusoff
Jul 21 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

14
by: Zenobia | last post by:
Hello folks, Is it possible to position an item within a <td> element? For instance see below. The table has multiple rows, one for each database record. Each row has 3 hrefs associated with it...
0
by: joeZ | last post by:
hi there! I'm just going crazy with this stuff I want to do I though was simple. I just want to locate an image (which is linkeable) below the bottom of a cell. I mean, if the cell is at...
2
by: Joachim Bauer | last post by:
I'm using the code below to display a menu that opens when the mouse goes over the main menu item (try it in your browser to understand the behaviour). It uses "position:absolute" and a switch...
6
by: Gert Brinkmann | last post by:
Hello, as I understand the specs http://www.w3.org/TR/CSS21/visuren.html#x19 an absolute positioned block element is positioned relative to its parent element. This is told in the german...
4
by: spivee | last post by:
I'm having an odd type of issue. I want to be able to pass an element name in my javascript event and find the location of the element, be it a div, span, img whatever, specifically the top and...
6
by: Gérard Talbot | last post by:
Hello fellow stylers, When trying this page http://www.gtalbot.org/BrowserBugsSection/PercentualRelativePositioning.html I get different rendered layouts with IE 6, IE 7 beta 2, Firefox...
4
by: i_dvlp | last post by:
What does a child element inherit as far as position, top, left, etc. ? I'm using DHTML to create child, and append with appendChild() I actually used "position:absolute" with a parent...
10
by: Mark | last post by:
According to my book on CSS, if you apply 'position: relative' to a block-level element, it will stay exactly where it is. However, you can then use top, left etc. to offset the element relative to...
4
by: HoangTuanSu | last post by:
I have just got a javascript code from my friend. I've modified it for my purpose but a problem happens. First, here's my code html <body> <table align="center" width="60%" height="100%"...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.