Why is the DIV becoming invisible

HTML & CSS
1

Hey all,

We are working on our Node.js based Chat.
And have a lil CSS issue again. To see it go to the sample chat, which is here:

and you will see the DIV that is to state the Room value, which in this sample case says:
“Anoox Public Test Chat Room”
in the DIV ID = owner_area
is getting buried under something!
So we want to move this DIV with position: absolute; via top negative value outside of the DIV which
contains it as a relative DIV.
We have even given it z-index of 1500 or whatever value but when we move it out of the DIV it becomes buried!
How do we make the DIV ID = owner_area to be visible while outside the relative DIV that contains it?

So to be clear we want this DIV ID = owner_area to be relative to DIV ID = chat_con so that in devices with different screen sizes, Mobile phone, etc. we have certain positioning between these 2 DIVs.

Thanks,

2

You have pulled it out of view with top:-10px;

#owner_area {
	font-size: 14px;
	background-color: navy;
	color: white;
	position: absolute;
	padding: 1px;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 3px;
	/*top: -10px; offending rule */
	left: 5px;
	z-index: 1500;
}

Though that may have been intentional there is something else with a higher stacking order.

Just so you know, a positioned child with z-index:1500 cannot rise above it’s parent’s stacking level of say z-index:1

I’ll have another look at it

3

The problem is that you have used overflow:auto and position:relative on #chat_con which means that an absolute element cannot escape from an overflow box when the parent has position:relative applied.

If you remove position:relative from #chat_con and then use top:auto on #owner_area you can then nudge it into place with negative margins.

e.g.

#chat_con{position:static}/* was relative*/
#owner_area{
    top:auto;/* was top:-10px*/
    margin:-1.4em 0 0 1em
}
2 Likes
4

Looks like overflow:auto here is hiding the -10px offset


#chat_con {
	width: 100%; 
	margin-top: 130px;
	padding: 5px;
    /*  overflow: auto; */
	position: relative;
}

Edit:
Paul ninja’d me by seconds :slight_smile:

2 Likes
5

Assuming that overflow:auto isn’t being used then yes that would be the easiest fix :slight_smile:

6

Yes, I didn’t notice any problems by removing it

EDIT:
The #chat_area has overflow:auto on it, that controls the scrolling for the messages.

1 Like
7

Yes that fixed it.
Thanks.

I tell you this darn CSS is one hek of a dooozy :slight_smile:

1 Like
8

It’s best practice to set rules only when you need them and you know what they are doing.

You’d be surprised at the amount of CSS newbies that set position:relative on everything.

2 Likes
9

Generally it’s the coder that is the doozy :slight_smile: ( no offence intended)

If you tell the element to control the overflow so it doesn’t spill out (overflow auto) then how do you expect to easily move content outside of that area? You just told it not to do that :slight_smile:

There is logic to CSS and there are stil ways to do most things but as mentiomed before you have to learn the rules of the language first ( as with all languages).

CSS isn’t perfect and does have unintuitive parts but there is an undeniable logic to most of its rules. Newbies often fall foul due to lack of knowledge or poor coding techniques ( like your header that obscures your content when it wraps at smaller widths).

At the end of the day CSS does mostly what it was designed to do - it’s up to the coder to use it properly.

I’m not saying CSS couldn’t be better in places but its not as bad as you make out :slight_smile:

5 Likes
10

Yes, I agree.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.