I'm tired! How to switch the layout order?

I have a CSS layout like this:
You see, the Page Title layer is above the Menu layer,
so how can I make the Menu layer displayed above the Page Title layer??? :rolleyes:

Hi,
Without seeing your code all I can do is guess, but try this …

menu {position:relative}
to auto stack it above the title

Depending on where the menu is in the source order you may also need z-index if you have applied positioning to your title, hard to say without seeing your code.

thanks, thanks, thanks,
that’ what i wanted!!
you see, i have added the code you gave me in “.sf_region3” (menu), and it is on top now!!
just one more question,
how can i organize the order ??

/*----------------------------------
			Theme665
----------------------------------*/
h1, h2, h3, h4, h5, h6 {  
	margin: 0px 0;  
} 

body {
	font-family: "Courier New", Times, FreeSerif, serif;
	margin: 0;
        background-color:black;
}

.sf_outer_wrapper {
	margin-top: 20px;
        margin-left: 220px;
        width: 910px;
        height: 520px;
        border:1px solid gray;
        padding: 10px 0;
        background-color:black;
}

.sf_wrapper {	
        margin-top: 30px;
        margin-left: 50px;
	width: 810px;
        height: 410px;
	padding: 0px 0;	
        border:1px solid gray;
        background-color:white;
}

/* main */

.sf_region1 {
	/*
margin-left: 0px;
*/
}

.sf_region6 {
	margin:0 0 0 0 0px;
	_height: 1%;
}

.sf_pagetitle {
     width: 100%;
	 float:left;
         margin-top: -18px;
         margin-left: -200px;
         width: 810px;
         height: 20px;
         color: black;
         font-size: 20px;
         z-index:-30;
}

.sf_content {
	float:left;
	margin-left: -5px 0;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        font-size: 14px;	
}

/* sidebar Left */

.sf_region3 {
        position:relative;
        float: left;	
	width: 160px;
	overflow: visible;
        color: #000000;
        margin-left: 10px;
        margin-right: 10px;
	margin-top: 60px;
        font-family: Courier New, sans-serif;
        font-size: 14px;	
        text-decoration: overline;
}

.sf_region3 .widget {
	margin: 100px 0;
}

/* sidebar Right */

.sf_region7 {
	float: right;	
	width: 180px;
	overflow: hidden;
	margin: 0;
}

.sf_region7 .widget {
	margin: 20px 0;
}

/* navigation */

.sf_region3 .sf_navigation .widget {
	margin: 0;
}

.sf_navigation h3 {
	display:none;
}

.sf_navigation {
	padding: 0;
	margin: 0 0 20px;
	float:left;	
}

.sf_navigation:after {
	content: " ";
	display: block;
	clear: both;
	visibility: hidden;
	font-height: 1px;
	margin: 0px;
	padding: 0px;
}

.sf_navigation ul {
	min-height: 1%;
	height: auto !important;
	height: 1%;	
	list-style-type:none;
	margin:0;
	padding:0;	
}

.sf_navigation ul:after {
	content: ".";
    display: block;
    visibility: hidden;
    height: 0;
    font-size: 1px;
    clear: both;
}

.sf_navigation ul li {
	margin: 0;
	padding: 0;
	white-space: nowrap;
	height: 1%;
	float:left;
	width:180px;	
}

.sf_navigation ul li a {
	display: block;
	margin: 0;
	padding:0;
        font: bold;
	text-decoration: none;	
}

.sf_navigation ul li a:hover {
	text-decoration:none;
        color: #D18C02;
}

/* subnav */
.sf_navigation .subnav {	
	background-color: #eee;	
	float: left;
	left: -999em;
	list-style-type: none;
	margin: -20px 0 0 100px;	
	padding: 0;
	position: absolute;	
	width: 150px;
	z-index:1000;	
}

.sf_navigation .subnav li {
	float: left;
	width: 150px;
	margin: 0;
	padding: 0;
	white-space: normal;
}

.sf_navigation .subnav li a {
	width: 140px;
	display: block;
	padding: 2px 5px;
	margin: 0;
}

.sf_navigation .subnav li a:hover {
        background: #FFFFFF;
        color: #D18C02;		
}

#Nav1 li:hover ul,
#Nav1 li.sfhover ul {
	left: auto;
}

#Nav1 iframe {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0);
}

#Nav1 li:hover,
#Nav1 li.hover {
	position: static;
}

/* End Navigation */


/* Footer */

.sf_region10 {
	margin-left: 270px;
        width: 810px;	
	padding: 0px 0;
        margin-top: -50px;
		
}

.sf_banner {
	padding: 0px 0;
        margin-top: 0px;
	font-size: .75em;
}

/* Other */

.form_button {
	padding: 5px 0px;
}

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

how can i organize the order ??

Generally I will start with any global styles of html elements at the top of the stylesheet (like you have done with your h tags and body). Then below that I will set up classes that may be used across the whole site.

From there I will set up the selectors for my major divisions in the page, those will usually be ID’s. At that point, I try to let my css flow in the same order as the html does for the sake of staying organized.

thanks,
in my situation,
is that means if i put the code of “.sf_region3” (menu) first,
then the elements displayed inside “.sf_content” (main content) will always stack below the menu?

that means if i do that:
the menu will always stay on top of the content without {position:relative}?


 
/* sidebar Left */
 
.sf_region3 {
        float: left;    
    width: 160px;
    overflow: visible;
        color: #000000;
        margin-left: 10px;
        margin-right: 10px;
    margin-top: 60px;
        font-family: Courier New, sans-serif;
        font-size: 14px;    
        text-decoration: overline;
}

.sf_content {
    float:left;
    margin-left: -5px 0;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        font-size: 14px;    
}

that means if i do that:
the menu will always stay on top of the content without {position:relative}?
No, the order of the CSS does not have any influence on stacking orders of positioned elements. That is determined by their order in the markup (the html) and by any z-index values that may be applied in the CSS.

I suspect you had your title coming before the menu in the html with positioning applied to it as well.

Positioned elements (other than static) will layer above non-positioned elements. And positioned elements lower in the source will layer above positioned elements before them, that’s what I call “auto stacking”.

I’d need to see your html to know what is going on and suggest a fix that does not use positioning.

thanks,
so if i have 2 components applied the same positioning code (like position:relative), which one will go first?
actually, this website is making by Godaddy online builder,
so i don’t know how to extract the html from the builder.
it seems that’s the limitation.

if i have 2 components applied the same positioning code (like position:relative), which one will go first?

There are a lot of variables that come into play with stacking orders. The best thing you can do is read through the Positioning details in the css reference for a complete understanding.

which one will go first?

The one with the higher z-index or in a positioned parent with a higher z-index.

or…

The one that is lower in the page source when no z-index is applied

There are some IE6/7 z-index issues that discredit what I said above but they are bugs.