I have two block elements, a header, and a nav. The header has a div inside of it that overflows above the nav. I used z-index to define those items that way, but now I have a items inside of the nav that I'd like to be the most prodominent/highest element on the page, so to appear above the header and it's overflowing elements. Is this possible?
Please see example - http://jsfiddle.net/zAehr/ - I'd like the Nav a items to be above the blue logo class.
My CSS:
#header {
position:relative;
display:block;
height:100px;
width:100%;
overflow:visible;
background:#eee;
z-index:10;
}
.logo {
position:relative;
display:block;
height:250px;
width:250px;
background:#336699;
z-index:10;
}
#navbar {
position:relative;
width:100%;
height:100px;
background:#bbb;
z-index:9;
}
#navbar a {
display:block;
position:relative;
padding:10px;
z-index:100;
float:left;
}
Many thanks SO
take the z-index: 9 off of #navbar
http://jsfiddle.net/pxfunc/zAehr/1/
Related
How can I get a child div which is positioned absolutely to not show up when its placed outside the reach of its parent?
https://jsfiddle.net/knp9ebys/9/
.papa {
background:red;
overflow:auto;
width:90px;
height:90px;
}
.baby {
position:absolute;
top:100px;
left:100px;
width:25px;
height:25px;
background:blue;
color:white;
}
Try this:
.papa {
background:red;
overflow:auto;
width:90px;
height:90px;
position:relative; /* add this line */
overflow:hidden; /* add this line */
}
.baby {
position:absolute;
top:100px;
left:100px;
width:25px;
height:25px;
background:blue;
color:white;
}
If you add position:relative; to the parent element then the child element can be positioned within the context of the parent. Adding overflow:hidden; is the trick because this will remove scroll bars... and since the positioning of the child element is outside the parent's bounds, it will make the child appear to be hidden from view.
.product {
position:relative;
width:300px;
height:200px;
overflow:visible;
}
.menu {
position:absolute;
width:200px;
height:400px;
}
<div class="product">
<div class="menu></div>
</div>
The menu is hidden by its parent product. The product overflow is visible.
How to make the menu fully visible? The product position is relative, which can
not be changed.
The menu is hidden, and it will become visible on mouseover.
EDIT ---------
The above code is working. The menu is not fully visible because it is clipped by next product. So set z-index to 1000. However,
.product {
position:relative;
width:300px;
height:200px;
overflow-x:hidden;
overflow-y:visible;
}
is not working. There is a vertical scroll, same as overflow-y:auto. why?
You could add padding or margins to them if it's just underneath it. However it's kind of hard to actually see what it's doing so maybe make a fiddle.
.product {
position:relative;
width:300px;
height:200px;
padding: 10px;
overflow:visible;
}
.menu {
position:absolute;
width:200px;
height:400px;
padding: 10px;
}
I want to know the best way to achieve the below image in CSS+HTML.
I'm having difficulty explaining in words what I want, so I guess a picture would make it more clear:
While the second and third parts are doable. I'm curious to know the best way to achieve the first one (Blue menu). If i split my page into three parts (based on the menus), in the case of blue, my div items must float out of the horizontal width of the menu, but within the vertical.
Thoughts wise ones?
Working Fiddle
You can see i have used position:relative on parent and position:absolute on child to make it flow out of that li element.
ul {
list-style:none;
width:906px;
height:600px;
}
li {
float:left;
display:inline-block;
border:1px solid #ccc;
width:300px;
height:600px;
text-align:center;
position:relative;
}
.selected {
background:yellow;
}
.div {
position:absolute;
left:-150px;
width:600px;
height:80px;
border:1px solid #000;
background:#fff;
z-index:2;
}
#div-1 {
top:30px;
}
#div-2 {
top:140px;
}
#div-3 {
top:250px;
}
You can do it by position: absolute.
.blueDiv{
position:relative;
}
.innerDiv{
position:absolute;
top: (your choice);
left: 50%;
margin-left: -(innerDivSize / 2);
}
If you don't have the width of the elements inside ... you can try to push them to the left and right by:
.innerDiv{
position:absolute;
top: (your choice);
left: 0;
right: 0;
}
But that will work only if the parent element is not on the very left or very right of the page.
I have a middleContent div which has two sub-divs acting as columns. The middleMain div works fine, the middleRight div doesn't show unless I fill it with some content or use absolute positioning.
This is a picture of my page:
http://imageshack.us/photo/my-images/403/tempzk.jpg/
With the following CSS:
#middleContent
{
position:relative;
min-height:500px;
height:auto;
}
#middleMain
{
float:left;
height:100%;
left:0;
right:auto;
}
#middleRight
{
position:absolute;
float:right;
width:100px;
height:100%;
right:0;
background-color:Orange;
top: 0px;
}
However, I need it to work with relative positioning since the height expands depending on the content in middleMain. MiddleRight doesn't have any content in it (but needs the capability to add content so I can't just use a picture), so I basically need to display an empty div (but with background color) that takes up the height of the whole page.
change your CSS to :
#middleContent
{
position:relative;
min-height:500px;
height:auto;
overflow: hidden;
}
#middleMain
{
float:left;
height:100%;
left:0;
right:auto;
}
#middleRight
{
position:relative;
float:right;
width:100px;
height:100%;
right:0;
background-color:Orange;
top: 0px;
padding-bottom: 9000px;
margin-bottom: -9000px;
}
http://jsfiddle.net/fXHqL/1/
Add this line to #middleRight
display:block;
it should work.
I have this styles:
header{
width:400px;
min-height:640px;
background:#9B9B76;
float:left;
z-index:1000; /*high*/
}
nav{
width:100%;
z-index:1001; /*highest*/
}
nav a{
float:left;
width:80%;
padding:10%;
font-size:20px;
}
nav a:hover{
background:#997548;
}
.LevelCnt_1{
float:left;
width:300px;
z-index:1; /*Lowest*/
position:absolute;
left:400px;
background:#baafa9;
}
the problem is that visually .LevelCnt_1 stays on top of header if I set left:0px
why is this happening?
z-index only work with position relative, absolute & fixed. So, give position:relative to your header & nav DIV .
Like this
header{
width:400px;
min-height:640px;
background:#9B9B76;
float:left;
z-index:1000; /*high*/
position:relative
}
nav{
width:100%;
z-index:1001; /*highest*/
position:relative
}