CODEWITHSUNDEEP
htmlcss
hey
hey

Reputation: 11

changing the CSS property of parent div in inner div element

I have a parent div and the overflow property in my CSS is defined as hidden.

However the child div which is wrapped inside the parent div and I am positioning the child div absolute with respect to my parent div and show it on top of the page using top:something.

However the child div is not visible on the page since the overflow property of parent div is set as hidden.

It looks something like this

<div id="parent">
<div id="child">
</div>
</div>

CSS

#parent {
overflow: hidden;
}

#child {
position: absolute;
top: -290px;
left: 0px;
bottom: auto;
z-index: 1;
visibility: visible;
}

How to I make the child div visible without setting overflow property of the parent div as visible.

Upvotes: 0

Views: 1117

Answers (3)

SW4
SW4

Reputation: 71140

Simple answer, you cant.

If you're setting overflow:hidden on the parent, it will do just that to any overflow so so not show the child.

Regardless, if the parent div is aligned to the top of the viewport, because the child has top:-290px it will not be shown as it renders outside the viewable space of the browser window (namely 290px before it begins).

You may need to think about what you're trying to accomplish and why.

In order to correctly show child content outside the defined boundaries of a parent, consider giving the parent fixed height/width (optional) with a position of relative. The child should be positioned absolutely within this, but can be placed outside its limits. It will display as long as overflow:hidden isnt set on the parent, and the child's position remains within the browser viewport.

See this FIDDLE for examples

Upvotes: 4

Nick Vara
Nick Vara

Reputation: 73

Change the Top:-290px; value. Because it will go outside the limit.

Upvotes: 0

NativeWebs
NativeWebs

Reputation: 63

overflow: hidden; is not the actual reason for hiding child div. Minimize the top: -290px; to top: 0px; and child div will be visible.

Upvotes: 0

Related Questions