the relative position of <div> layer [Archive]

View Full Version : the relative position of <div> layer

joonstar

05-06-2003, 03:40 PM

<table width=100% cellpadding=0 cellspacing=0 border=0><tr><td>&nbsp</td><td width=759>
<table cellpadding=0 cellspacing=0 border=0 bgcolor=white>
<tr height=100 bgcolor=yellow>
<td width=759></td>
</tr>

</table>
</td><td>&nbsp</td></tr></table>

<div id="layer" style="position:absolute; width:332px; height:200px; z-index:9; left: 120px; top: 70px; background-color: green; layer-background-color: #000000; border: 1px none #000000"></div>

there are two colored rectangle shape in the page in the output of the above code.

One is yellow colored, and the other is green colored.

The left side of each colored rectangles is same positioned in 1024*768 resolution, but different positioned in 800*600 resolution.

I don't know much about style things.
How can I make them same positioned by left sided.

I think relative position of <div> is needed for this.
I don't know how?

would you help me?

HairyTeeth

05-06-2003, 10:48 PM

Relative potitioning specifies the position of the element 'relative' to its normal position in the flow of html. Absolute positioning positions the element exactly where you want, regardless of its position within the flow of html.

Two solutions for your problem:

1. Absolute position: specify left:10px;top:whatever-px;
2. Relative position: specify left:0px; top: whatever-px;

Both of these will left-align the green block with the yellow block.

ronaldb66

05-07-2003, 01:46 PM

What are you trying to accomplish?
It may come as a shock to you, but the solution you've chosen just may not be the best way to achieve the desired effect; if you just ask people to tweak it, you pass out on the opportunity that someone else can come up with a better approach altogether.

joonstar

05-07-2003, 05:37 PM

I am trying to make two contents in a place.

Content1 is on the buttom .
Content2 is on the top of the buttom layer.

Likte flash layers!

If the content2 is tranparent, it would be better.

cconn

05-07-2003, 06:36 PM

There is a transparency effect in CSS.
I believe the style attribute is "opacity". In NS 4.7x, there was a -moz-opacity. The values are 0% - 100%.

joonstar

05-07-2003, 06:42 PM

Thanks for your guide for transparency.

Before that, I need to know How I put a content on top of another content.

I can do that with "background image", but I like to use text.content in both content1 and content2.

cconn

05-07-2003, 07:45 PM

Cut and paste this HTML to your local hard drive, and view it in a browser, along with the actual HTML on the side, so you can see the subtle differences.

<html>
<head>
<style type="text/css">

</style>

</head>

<body>

Two different <DIV> layers, with a z-index set differently.

<div class="one">
<table width="75%" height="60px">
<tr>
<td bgcolor="blue">
 
</td>
</tr>
</table>
</div>

<div class="two">
<table width="25%" height="20px">
<tr>
<td bgcolor="red">
 
</td>
</tr>
</table>
</div> 
Because the top & left parameters are set, when combined with relative positioning, the red rectangle is on top of the blue rectangle<BR><BR>
And of course, the z-index values would make the red layer appear over the blue layer<br><br>
<hr>
<br>
Here's another "oddity" (or at least those that are not familiar with CSS think so):<BR>
The same code is used, except that the red <DIV> section is located within the blue section.<br>
Notice the difference in where the red section is positioned (even though both examples use the same style sheet)?

<div class="one">
<table width="75%" height="60px">
<tr>
<td bgcolor="blue">
 
</td>
</tr>
</table>
<div class="two">
<table width="25%" height="20px">
<tr>
<td bgcolor="red">
 
</td>
</tr>
</table>
</div> 
</div>

</body>
</html>

joonstar

05-07-2003, 11:54 PM

thanks to cconn.
I think I got what I want.

By the way,
I don't still understand what the value of the z-index:"z-index: 50;"?