How to get CSS to display things on top of other things?

[fuzzybabybunny]

I'm looking at this site:

http://www.spacious.hk/en

I can't quite figure out how they are superimposing the

"Spacious Hong Kong Finding a great place to live has never been this easy." part and the search bar.

Looking at the CSS, div.context-box-wrapper doesn't have any kind of z-index property to it... so how are they getting it to appear on top of the image?

And how does superimposing work when you're using a grid system? The grid for the bottom layer is simple enough, but then you have a layer of content on top of the bottom layer... that might be using a different grid? Or something?

 

[TechBoyJK]

Haven't checked the source code. Is the background image fixed with no repeat? If so, then the superimposed text has a default Z value that puts it on top. No need to declare it. because the background image is already set behind the main layer.

 

[TechBoyJK]

Looks like the entire section is part of the

<div class="context-box-wrapper"> </div>

So yes, that's the div that contains the text.

Looking through the CSS

http://assets1.spacious.hk/assets/application-3fc90256f9edb926e4acf8eda253b948.css

I find that the background image 'http://assets1.spacious.hk/assets/background/landing-8196cffe5f607509e48b075c6db3ded2.jpg' is declared as

.section-search{background-image:url(//assets.spacious.hk/assets/background/landing-8196cffe5f607509e48b075c6db3ded2.jpg);background-repeat:no-repeat

So, that image is set as the background, but since it has 'no-repeat' you only see it at the top.

in summary, there's no z-index needed because all of the text within "context-box-wrapper" is in the foreground by default. There's nothing to be on top of it.

 

[fuzzybabybunny]

Oh, interesting. But why? Why would "background-repeat: no-repeat" have anything to do with z-index of things that overlap it? "no-repeat" should only affect the, uh, "repeating" of the background, no?

 

[TechBoyJK]

Oh, interesting. But why? Why would "background-repeat: no-repeat" have anything to do with z-index of things that overlap it? "no-repeat" should only affect the, uh, "repeating" of the background, no?

They aren't directly related.

The no-repeat was just to explain why the background image wasn't all over the page but just at the top.

Otherwise, think of it this way; background images (those declared as BACKGROUND) automatically get a Z index setting that set's them behind normal text.

So it's less that the text in question needs a Z index to put it over the image and more that the background image has a default z index that sets it behind everything.

 

[fuzzybabybunny]

They aren't directly related.

The no-repeat was just to explain why the background image wasn't all over the page but just at the top.

Otherwise, think of it this way; background images (those declared as BACKGROUND) automatically get a Z index setting that set's them behind normal text.

So it's less that the text in question needs a Z index to put it over the image and more that the background image has a default z index that sets it behind everything.

I see. So for anything else that is NOT background-image, you would have to explicitly set the z-index on, right?

 

[TechBoyJK]

I see. So for anything else that is NOT background-image, you would have to explicitly set the z-index on, right?

Yep. The exact reason you find the z-index to be missing is the same reason background imges don't need it to be set. Background takes a default z-index that sets it behind everything else that doesn't have it declared.

Honestly, I'm not sure what the default z-index is for background. Is it -1, something easy to get around, or is it like -9999999999999999999999999999999999999 to make sure it's always set to the back?

Interesting question. I wonder how hard that is to defeat? I don't see the point though... background is background.

 

[Ken g6]

There's a lot more to stacking than z-index. According to this site:

If we do not use a z-index value on an element, it will render at the rendering layer of 0 and will not be moved. The stacking order now looks like this:

1. Positioned elements with z-index of greater than 0, first in order of z-index from lowest to highest, then in order of appearance in source code
2. Positioned elements, in order of appearance in source code
3. Inline elements
4. Non-positioned floating elements, in order of appearance in source code
5. All non-positioned, non-floating, block elements in order of source code
6. Positioned elements with z-index of less than 0, first in order of z-index from highest to lowest, then in order of appearance in source code.
7. Root element backgrounds and borders

 

[TechBoyJK]

There's a lot more to stacking than z-index. According to this site:

Good post. Going to read that in depth tonight.

I was really just explaining things as I would try and achieve them.

 

[LumbergTech]

read up on absolute and relative positioning

 

[maxi007]

Use absolute postion (position:absolute)
or just edit the frame and create a space for that

 

[Marktaree]

read up on absolute and relative positioning

Yeah @LumberTech - I've seen quite a few other sites achieve the same effect without having to use z-index.... It's not that difficult if you look at the Dell's site they do exactly the same and also on OneDay's site:-

https://www1.ap.dell.com/content/public/css.aspx?c=vn&l=en&~set=storm88MH

Computers, Monitors & Technology Solutions | Dell Vietnam

Explore Dell's latest computers & technology solutions. Laptops, Desktops, Gaming PCs, Monitors, Workstations, Storage & Servers.

www1.ap.dell.com

University Heights (翰林軒), Kennedy Town | OneDay (搵地)

Landlords & Agents can list 2 properties for FREE at University Heights(翰林軒) which is a Residential Building located at 23 Pokfield Road, Kennedy Town, Western District, Hong Kong Island

www.oneday.com.hk

Just use background-image and relative positioning.