Home › Blogs › Salka's blog

Overlapping CSS request~ (solved, thank you! <3)

Salka's picture
July 18, 2013 - 7:55pm — Salka
I have been seeing some really neat tricks with CSS lately, but one in particular has had my interest for quite a while: having a picture, or a portion of it, overlap a box/table.

A perfect example of this can be seen on Lats'vel's bio, and another variation can be found here. I would love to utilize it in my bios; it gives off such a lovely effect when executed correctly.

I understand that most people are normally iffy about sharing codes in public. If anyone is willing to indulge, but does not wish to reveal it in a comment, you can reach me at

This is just a casual request, and if no one wishes to respond then that is perfectly fine. Just thought I'd give it a shot! n_n ♥
July 18, 2013 - 8:00pm — Aivilo
Aivilo's picture

You need to adjust the

You need to adjust the z-index and position values of the image. In example:

<img src="URL" style="position:relative;z-index:11;top:-50px;right:30px">

You may need to do a couple variations on where you put it into the code in order to get it to work like you want it to (such as hiding it in a tiny div within the div you want it to sit on top of). Also, be warned that any links the image covers (even in transparent areas) will not be clickable.
—
July 18, 2013 - 8:02pm — Waning-Sun
Waning-Sun's picture

Ninja'd. ^^

Ninja'd. ^^
—
Avatar by Meadow. Siggy © Shey & Squeegie
July 18, 2013 - 8:05pm — Salka
Salka's picture

Ahh, I knew it would be

Ahh, I knew it would be something so simple! Thank you so much for the tips, Aiv; I'm sure it can get tricky pretty quickly. Just takes some tweaking as with any code. n_n I will definitely put this info to good use! ♥
—

July 18, 2013 - 8:16pm — Unplugged
Unplugged's picture

"(such as hiding it in a tiny

"(such as hiding it in a tiny div within the div you want it to sit on top of)"

There is an easier way to avoid excessive blank spaces (which is the only reason I could think of for using extra divs). Simply add a negative "margin-bottom" that is the same value as "top". So Aivilo's code becomes this:

<img src="URL" style="position:relative;z-index:11;top:-50px;right:30px;margin-bottom:-50px">

Usually, a negative "top" value will create a blank space on the spot where the image "actually" is. Here the negative margin-bottom negates the 50px which the image is pushed upwards.
July 18, 2013 - 8:19pm — Salka
Salka's picture

Oh wow, that's a great tip! I

Oh wow, that's a great tip! I always wondered how to get rid of those annoyingly excessive blank spaces. @n@ That is very interesting! Thank you so much Unplugged, I will definitely take note of that. Your advice is always so helpful! ♥
—

July 18, 2013 - 8:22pm — Unplugged
Unplugged's picture

Ah you ninja'd me! One more

Ah you ninja'd me! One more thing:

You can also use "position:absolute" instead of "position:relative". With this, the image's position is calculated relative to the overall width of the page ((instead of from it's "true" position)). So, for example, "top:0px" and "left:0px" will give you an image in the very top left corner of the page, while "top:0px;right:0px" would put it in the very top right corner. In some situations it's easier to position images with "absolute" than it is with "relative".
((this explanation is a bit inaccurate, but should do.))

Sorry for the ramble 6_9
July 18, 2013 - 8:27pm — Salka
Salka's picture

Ninja-skills! :9 I totally

Ninja-skills! :9 I totally forgot about absolute and relative values, thank you for reminding me! This is an awesome plethora of information; can't wait to work with what I have! No worries about the explanation, it makes perfect sense! n_n

Haha aw, don't apologize, this is a very good ramble! You know a lot about codes, and you like to explain. I totally appreciate it, thank you so much again! ;u; ♥
—

July 18, 2013 - 8:53pm — Aivilo
Aivilo's picture

Quote:There is an easier way

Quote:
There is an easier way to avoid excessive blank spaces (which is the only reason I could think of for using extra divs)


No, it's done in order to keep the image with the div box it overlaps whenever the page is resized, if the div isn't set to an absolute position. In example, here.
—
July 18, 2013 - 8:57pm — Salka
Salka's picture

Hm... Just to be clear, when

Hm... Just to be clear, when you say 'tiny div' do you mean simply adding another set of opening and closing div tags around the div box with the picture? If that makes sense dskfja D;
—

July 18, 2013 - 9:02pm — Aivilo
Aivilo's picture

<main div, overflow:auto -

<main div, overflow:auto - may also be a double-div to provide an invisible scroll bar, if desired><div style="height:1px;width:1px;"><img src="IMAGE" style="POSITION STUFF"></div>MAIN DIV BOX'S NORMAL CONTENTS</div>

Note there are NO overflow settings in the tiny div (the one immediately around the image)
—
July 18, 2013 - 9:10pm — Salka
Salka's picture

Holy cow, we're getting to

Holy cow, we're getting to Inception-like levels of divs! :9 That is absolutely wild. Lots of tweaking, for sure. Definitely going to play around with these later~ Thank you, Aiv! ♥
—

July 18, 2013 - 9:22pm — Unplugged
Unplugged's picture

Aivilo-- I don't

Aivilo-- I don't understand... if the image is positioned relative inside a relative element it will stay relative to that. as a matter of fact, even if an image is absolute in a relative element it will also stay relative to that. I think the extra div here is unnecessary clutter, but I haven't had a chance to experiment with it yet.
July 18, 2013 - 9:31pm — Aivilo
Aivilo's picture

Entirely possible, but it's

Entirely possible, but it's what was suggested to me to fix the problems I was having getting the two to move together precisely, and it works - and if it ain't broke don't fix it, lol
—
July 18, 2013 - 10:13pm — Poppyflower
Poppyflower's picture

Ooh, keeping an eye on this.

Ooh, keeping an eye on this. ♥
—
~Poppy~
Profile picture by ahimsa ♥


Pixel Wis by squeegie~
July 18, 2013 - 11:19pm — Salka
Salka's picture

Mkay, I got the hang of it

Mkay, I got the hang of it but I already see a big problem: every time I leave and then go back to Crier's bio, the image has slid down from its former position. There must be one little thing I need to tweak, but I'm not sure what. It just keeps sliding down without me changing any position values. Any ideas? :/
—

July 18, 2013 - 11:41pm — Unplugged
Unplugged's picture

Do you mean it has a

Do you mean it has a different position in the preview than it does in the final version? Or are you talking about something else?
July 18, 2013 - 11:49pm — Salka
Salka's picture

It does have a different

It does have a different position in the preview than it does in the final, but that is okay because the final version looks perfect. The problem is that when I navigate away from the bio, and then click the link to go back to it again, the image has somehow slid down a bit. Not a whole lot, but more than desired.

It's not a huge deal as I can still see everything in the box just fine, but I suppose for future reference it would be good to know what to tweak in order to keep the position fixed. Here is the code for reference:

<*div style="height:1px;width:1px;"><*img src="http://i.imgur.com/jyFd84o.png" style="position:absolute;z-index:11;top:85px;left:180px;margin-bottom:85px"><*/div>

Positive values worked a lot better for me than negative values. Unless, somehow, that is causing the problem I'm having... o.O
—

July 19, 2013 - 1:06am — Aivilo
Aivilo's picture

Every time you edit the page,

Every time you edit the page, it'll have a little bar saying "the changes to x page were saved" - that bar disappears when the page is reloaded. That's probably what is throwing things off. Just refresh after saving to see where things actually are.
—
July 19, 2013 - 1:29am — Salka
Salka's picture

Ohh okay, that seems to be

Ohh okay, that seems to be it! Very interesting. Thank you so much for all of your help! ;u;
—