ansaurus

Question

Position An HTML Element Relative to its Container Using CSS

Answer 1

+2 A:

You have to explicitly set the position of the parent container along with the position of the child container. The typical way to do that is something like this:

div.parent
{
    position: relative;
    left: 0px;  // stick it wherever it was positioned by default
    top: 0px;
}

div.child
{
    position: absolute;
    left: 10px;
    top: 10px;
}

Stephen Deken 2008-09-19 19:50:53

You don't need to provide top or left property values for relatively positioned elements if they are zero.

Jim 2008-09-19 19:56:47

True for existing browsers but not defined in the specification.

Stephen Deken 2008-09-19 19:59:37

"True for existing browsers" is definitely good enough for me.

Craig Walker 2008-09-19 20:02:02

It is certainly defined in the specification. Read section 9.4.3 and check the initial values for the properties.

Jim 2008-09-19 20:31:50

9.4.3 says that the initial values for left and top are 'auto'. The definition of what happens to 'auto' values is sort of convoluted, and I've never been able to fully understand them. I'll take your word for it if you say that it winds up being zero, though.

Stephen Deken 2008-09-19 20:37:51

Answer 2

+2 A:

Absolute positioning positions an element relative to its nearest positioned ancestor. So put position: relative on the container, then for child elements, top and left will be relative to the top-left of the container so long as the child elements have position: absolute. More information is available in the CSS 2.1 specification.

Jim 2008-09-19 19:53:05

Answer 3

+18 A:

You are right that CSS positioning is the way to go. Here's a quick run down:

position: relative will layout an element relative to itself. In other words, the elements is laid out in normal flow, then it is removed from normal flow and offset by whatever values you have specified (top, right, bottom, left). It's important to note that because it's removed from flow, other other elements around it will not shift with it (using negative margins instead of you want this behavior).

However, you're most likely interested in position: absolute which will position an element relative to a container. By default, the container is the browser window, but if a parent elements either has position: relative or position: absolute set on it, then that will act as the parent for positioning coordinates for its children.

To demonstrate:

<div id="container">
   <div id="box"> </div>
</div>

#container {
  position: relative;
}

#box {
  position: absolute;
  top: 100px;
  left: 50px;
}

So in that example. the top left corner of #box would be 100px down and 50px left of the top left corner of #container. If #container did not have position: relative set, the coordinates of #box would be relative to the top left corner of the browser view port.

Hope that helps.

Bryan M. 2008-09-19 20:01:06

It helps me!! Thanks

Luc M 2008-12-24 14:24:08

Answer 4

A:

This should to exactly what you need.

<html>
<head>
    <title></title>
</head>
<style type="text/css">
    #container { position: relative; width: 600px; overflow: hidden; }
 .bar { float:left; height: 20px; border: 1px solid #cc0; background-color: #ff8; margin: 10px 600px 0 0}
</style>

<body>
    <div id="container">
        <div class="bar" style="width: 88%;"></div>
        <div class="bar" style="width: 50%;"></div>
        <div class="bar" style="width: 90%;"></div>
  <div class="bar" style="width: 1%;"></div>
  <div class="bar" style="width: 23%;"></div>
        <div class="bar" style="width: 1%;"></div>
    </div>
</body>
</html>

It's an implementation based on floats, but the key here is the 600px margin on your boxes. This should remove the float layout problems.

This is better then absolutely positioning because you won't have to keep track of where each bar on your graph goes on the y axis. You just let the browser position it for you nicely.

Of course, part of the reason why you might want to avoid floats is that you have other elements on the page that are floating as well, and that is where the interference lies. The overflow:hidden on the container should prevent against some of that happening.

Jonathan Arkell 2008-09-19 20:35:22

Answer 5

A:

try{ debugEn(); } catch(ex){}

function debugEn(){ var pos = Find_Pos(document.getElementById('hotelInfoFormId:panelTabId:0:j_id441')); var left = pos[0] + 2; var top = pos[1] + 2; document.getElementById('imagePanelPopup').style.left = left + 'px'; document.getElementById('imagePanelPopup').style.top = top + 'px'; }

insert script code inside element u want to postion it(it has imagePanelPopup ) related to (hotelInfoFormId:panelTabId:0:j_id441) and add debugEn() function to html page body

saif 2009-10-19 13:44:41

ansaurus

tags:

views:

answers:

Position An HTML Element Relative to its Container Using CSS

related questions