In CSS the overflow:hidden is set on parent containers in order to allow it to expand with the height of their floating children.
But it also has another interesting feature when combined with margin: auto...
If PREVIOUS sibling is a floating element, it will actually appear juxtapose to it. That is if the sibling is float:left then the container with float:none overflow:hidden will appear to the right of the sibling, no newline - just as if it was floating in the normal flow. If the previous sibling is float:right then the container will appear to the left of the sibling. Resizing this container will accurately show it centered inbetween the floating elements. Say if you have two previous siblings, one float:left the other float:right, the container will appear centered inbetween the two.
So here's the problem...
How do I maintain that type of layout WITHOUT masking children?
Googling all over the web gives me ways on how to clear:both and expand a container... but I can't find any alternative solution to maintaining the left/right previous-child centering. If you make the container overflow:visible then the container suddenly ignores the layout flow of the floating elements and appears layered ontop of the floating element.
So question:
I have to have the container overflow:hidden to preserve layout...
how can I make it so the children aren't masked? I need to have the child absolutely positioned relative to the parent outside the container.
OR
How do I overflow:visible so I can absolutely position a child relative to the parent outside the container... YET preserve the sibling float-like-layout-flow?
You can use the clearfix to do "layout preserving" the same way overflow: hidden does.
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */
add class="clearfix" class to the parent, and remove overflow: hidden;
This is an old question but encountered it myself.
I have semi-solutions that work situational for the former question("Children visible in overflow:hidden parent")
If the parent div does not need to be position:relative, simply set the children styles to visibility:visible.
If the parent div does need to be position:relative, the only way possible I found to show the children was position:fixed. This worked for me in my situation luckily enough but I would imagine it wouldn't work in others.
Here is a crappy example just post into a html file to view.
<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
<div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
<div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
</div>
</div>
Neither of the posted answers worked for me. Setting position: absolute for the child element did work however.
For others, if clearfix does not solve this for you, add margins to the non-floated sibling that is/are the same as the width(s) of the floated sibling(s).
just add a position: static to parent. (bootstrap dropdown example)
HTML
<div class="menu px-3">
<li class="dropdown tab"> <!-- this is one you should add position: static to -->
<a role="button" data-bs-toggle="dropdown" class="nav-link dropdown-toggle">
Click to show dropdown<span class="caret"></span>
</a>
<ul class="dropdown-menu show" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(122px, 130px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="#" class="dropdown-item text-16 gray-1 tab">
Link one
</a>
</li>
<li>
<a href="#" class="dropdown-item text-16 gray-1 tab ">
Link two
</a>
</li>
</ul>
</li>
</div>
CSS
div.menu {
overflow-y: hidden;
overflow-x: auto;
}
li.dropdown {
position: static;
}
Please return to this link for more info
For others if this does not work try giving height in vh in the component where you need the scrollbar.
.parent {
overflow: hidden;
}
.child {
overflow: overlay;
height: 100vh;
}
Related
Here is the demo:
http://jsfiddle.net/53eP6/
<div class="container">
<span class="small">small text</span>
<div class="big">Big elements to be ignored</div>
</div>
The right element is the one I want to ignore ( in real-life experience, this might be some irregular size imgs)
So the parent element will have a fix height (by its padding and children's height ), rather than expand to fit the height of the big element that I want to ignore.
Simply floating the element would be ideal as it will still retain padding information from the parent to align top part correctly with the sibling inline element.
Fiddle: http://jsfiddle.net/Varinder/eg7DW/1/
Edit
fixed height on .container element
.container{
padding: 10px;
background:green;
height:20px
}
Fiddle: http://jsfiddle.net/Varinder/eg7DW/3/
.container {
position: relative;
display: inline;
}
.big {
position: absolute;
top: 0px;
left: 100%;
}
http://jsfiddle.net/e3vMn/
Situation
html:
<div class="container">
<div class="parent">
<div class="child">x</div>
</div>
</div>
css:
.container {
display: table;
}
.parent {
display: table-cell;
position: relative;
}
.child {
position: absolute;
right: 0;
}
What I expect:
the .child should be positioned to the right edge of .parent. Works in Chrome.
What I get in Firefox:
the .child is positioned to the right edge of the closest "non static" parent which is has not display: table-cell.
Fiddle
http://jsfiddle.net/SYG5k/2
Question
Why does display: table-cell influence the positioning of child elements, or, why is position: relative ignored on table-cell elements? Can I work around this if I rely on table-cell?
You need to put position: relative; in your parent.
So in the code in your question add position: relative; to .container
Or in your jsfiddle add position: relative; to .parent
.parent {
height: 150px;
width: 450px;
display: table;
margin-top: 400px;
background: #bbb;
position:relative;
}
Related : Firefox ignores absolute positioning in table cells and Positioning context on table-cell element in Firefox
About your questioning 'why' : It's no more a 'block' level element. It's a table-cell so positioning will behave in a different way (in this case, with firefox).
See this to understand deeper about 'tables' behaviors
http://jsfiddle.net/SYG5k/12
Add a wrapper to your absolute element and make it relative, so you will have something like table-cell > relative wrapper > absolute element
http://jsfiddle.net/SYG5k/13/
<div class="rel">
a
<div class="absolute">x</div>
</div>
.foo, .rel {
position: relative;
}
This is a work around I can't explain why it doesn't work normally. Perhaps someone else will answer that for you
Edit : my mistake the wrapper is supposed to wrap everything in the cell, it's what I originally wanted to code, more of a typo. I updated the fiddle above
A work around may be to use an inner div with a width and height of 100%, and set that to position:relative;
HTML:
<div class="parent">
<div class="cell foo">
<div class="cellInner">
a
<div class="absolute">x</div>
</div>
</div>
CSS:
.cellInner{
position:relative;
width:100%;
height:100%;
}
Updated JS Fiddle: http://jsfiddle.net/SYG5k/11/
I was adding a popup menu that appears on each row of the table as the user mouses over it when I ran into this FF problem. Based on the very useful info above, I ended up putting a div wrapper inside the table cell in each row where I wanted my absolutely positioned popover menu to located, and set its display property to relative. My JS then adds the absolutely position menu inside the div as each row is rolled - it has to be a child of the the relatively positioned div, of course. Note that the div will shrink-wrap the td's content rather than filling the td as I expected, but no matter, you then have a relative context, and you can use top and left on the absolutely positioned child element to locate it exactly where you want it with respect to the table cell.
For website:
http://68.50.243.1/wunhopkuendo/
I am trying to make the image carousel show UNDER the green banner on the top left. If I set z-index on the carousel to -1, the left/right buttons don't work. However if I set z-index to 999999 on the banner, it does not appear over the carousel. How can I accomplish this? Thanks!
JS Fiddle located:
http://jsfiddle.net/3ZSBh/
Just add position: relative for the image.
<a class="brand" href="#">
<img src="http://68.50.243.1/wunhopkuendo/img/logo.png"
style="z-index: 99; position: relative;" />
</a>
The reason behind this is, the z-index works only on positioned elements, that are not static.
Fiddle: http://jsfiddle.net/3ZSBh/1/
The 'z-index' tends to work on elements that have the same type of position applied.
http://jsfiddle.net/CqnH4/1/
You can apply the following to your CSS:
.navbar {
position:relative;
z-index:999;
height: 50px;
background:#ff0;
}
#content{
position:relative;
z-index:1;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
This would keep the navbar on top of the content...of course, you don't need to specify a z-index of 999...you could simply go with a value of 2.
I'm creating a css dropdown menu with css3. After that navigation, the page has a slideshow. the problem is when I'm hovering the dropdown menus, it's going under the slideshow, as a result the dropdown items can't be seen.
I don't know where to fix, navigation or slideshow ?
Here is the code for slideshow:
.sp-slideshow {
position: relative;
margin: 10px auto;
width: 100%;
max-width: 1000px;
min-width: 260px;
height: 360px;
color:#000;
Try adding z-index to both the slideshow wrapper and the menu.
and example would be:
HTML
<div class="nav">
</div>
<div class="content">
<div class="slider">
</div>
</div>
CSS
.nav{
z-index:100;
}
.slider{
z-index:80;
}
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Hope this helped, Let me know if it didn't.
Cheers Marco.
It's hard to help you, without any markup and just a few lines of CSS, but try to apply z-index to the dropdown menu.
dropdown class or id {
position: relative or absolute;
z-index: 1000;
}
I'm having problems working out the z-index order for an application we're working on, i have two root parents, a nav bar and a map, and one child, the map tooltip. The navbar should be visible above the map, so it has a higher z-index, but the problems is to make the tooltip in the map container to be displayed over the sidebar as well, a bit hard to explain, so you can visualize the case on http://jsbin.com/afakak/2/edit#javascript,html,live :
<div id="nav-bar">
The nav bar
</div>
<div id="map-container">
This is the map container
<div id="tooltip">
This is the Tooltip
</div>
</div>
Thanks for any help.
If #map-container is positioned (i.e. not static), this is not possible, because of the way z-index is compared:
body (or any other positioned parent element) is the reference for both #map-container and #nav-bar. Any z-index you give them is calculated in respect to the parent element. So the one of the 2 elements with the higher z-index will be rendered above the other one and all its child elements. Z-index of #tooltip will only be compared with other children of #map-container.
You could do as Nacho said and statically position #map-container. You can simulate fixed positioning via Javascript, if you like.
If you cannot do that, you need to change your markup, so that #nav-bar and #tooltip have a common positioned parent element. Either move #nav-bar inside #map-container, or #tooltip out of it.
Below solution should work but I don't know if you have a requirement like keeping nav-bar outside map-container. If so I don't think that there is a workaround for that.
CSS:
#tooltip-helper{
position:relative;
/*below properties are to demonstrate the helper*/
width:10px;
height:10px;
background-color:green;
top:200px;
left:200px;
}
#tooltip
{
position:absolute;
top:10px;/*this is just to make sure helper is visible*/
left:-100px;/*this is to center the tooltip*/
width: 200px;
height: 200px;
background-color: yellow;
color: black;
padding: 10px;
z-index: 15;
}
HTML:
<div id="map-container">
<div id="nav-bar">
The nav bar
</div>
This is the map container
<div id="tooltip-helper">
<div id="tooltip">This is the Tooltip</div>
</div>
</div>
You have to absolutely position nav-bar and tooltip (otherwise z-index won't be taken in account), and maintain map-container static positioned
#map-container{
...
position: static;
...
}
#nav-bar{
...
position: absolute;
}
#tooltip{
...
position: absolute
}
I think the only way you can do this with a position: fixed on the #map-container is to restructure your tool tips to display outside the #map-container. So on click of the icon "inside" the map container, the tool-tip itself is displayed above both (with a proper z-index set).
<div id="nav-bar">
The nav bar
</div>
<div id="map-container">
This is the map container
</div>
<div id="tooltip">
This is the Tooltip
</div>
After going through, your codes, i noticed this.
#tooltip{
background-color: yellow;
width: 200px;
height: 200px;
color: black;
padding: 10px;
z-index: 15;
}
Your #tooltip has a z-index, but it's not positioned. Z-index property will only work if it's has one of the position property value. And considering you want the tooltip to stand out, you should use the absolute position value like this.
#tooltip{
position: absolute;
background-color: yellow;
width: 200px;
height: 200px;
color: black;
padding: 10px;
z-index: 15;
}
HTML
<div id="map-container">
<div id="nav-bar">
The nav bar
</div>
This is the map container
<div id="tooltip">
This is the Tooltip
</div>
</div>
This keeps the #tooltip on top....
For future readers with similar problems -
If your conflicting child items are position: fixed, consider setting the height of the parent containers to 0px, and then shifting any parent background display settings onto a mutual grandparent of the conflicting children.
This solved my analogous delimma.
If, in the real page, the tooltip has to be shown only on hovering the map container, you could just change dynamically its z-index like so:
#map-container:hover
{
z-index: 16
}
Otherwise you need to change the position of the tooltip so that the nav-bar doesn't overlap it.