So I am making a site and I have a top bar with some box shadow. I then have a description box directly underneath. So I set the z-indexes to ensure that the top bars box-shadow would go over the description box with the following css:
#topbar{
z-index:9999 !important;
}
#description{
margin-top:0px;
z-index:-1 !important;
}
jsfiddle
you will notice if you change the margin-top, you can see that the shadow is being hidden underneath the description still!
why is this happening and how can I fix it?
note: neither element can have fixed or absolute positioning
Add position: relative to both elements. z-index only affects positioned elements.
Updated JSFiddle: http://jsfiddle.net/BAW23/3/
Related
I am using drop-down menu in my header for notification, but when drop down opens all the div's behind that are visible then I gave z-index to all the divs but the links on those div's are not clickable now!
drop-down div CSS:
.drop-down{
overflow:scroll;
overflow-x:hidden;
}
and the div's behind it are
#main-div{
z-index:-1;
position:absolute;
}
I guess that the negative z-index places the links underneath the body.
Use a positive z-index, for example 10 on the element that should be at the back and 20 on the element that should be in front.
Heys guys. I've made a simple sample of a problem that has had me stumped for a long time - the code below has no purpose at all, it just shows the problem in a more legible way.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="teste.css">
</head>
<body>
<div id="bar"></div>
<span>
Palavra
</span>
</body>
</html>
CSS:
#bar {
position: relative;
width: 100%;
height: 7%;
background-color: #5959AB;
color: white;
font-family: "Arial";
font-size: 150%;
font-weight: bold;
}
html, body {
height: 100%;
}
The result is:
So, I tried to make "Palavra" go up by adding a padding-bottom to it:
span {
padding-bottom: 2000px;
}
The result is:
"Palavra" just stays at the same precise position but a vertical scrolling bar appeared. It seems that "Palavra" is pushing down it's bottom part because it just can't go up from where it is.
This problem is appearing for me in so many ways that my mind is already blowing - can someone please help?
You need to give your span display: block
Then use a negative margin-top value
Example
There are 2 good ways to position the span.
You can make it display:block, and use a negative top margin as Lloyd Banks describes. The span needs to change from the default inline element to a block element because the top margin does not work with inline elements, but it does work with block elements.
From W3C "Margin properties specify the width of the margin area of a box. ... These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements."
With this technique, you'll need a z-index on the div and span, so the span will be on top of the div, and not slide underneath it. MDN z-index article
JSFiddle Example
#bar {
position:relative;
width:100%;
height:25px;
background-color:#5959AB;
color:white;
font-family:"Arial";
font-size:150%;
font-weight:bold;
z-index:1;
}
span{
position:relative;
display:block;
margin-top:-25px;
z-index:2;
}
The second way is to absolutely position the span so it will be pulled out of the document flow, and placed at the top of its container.
JSFiddle Example
span{
position:absolute;
top:0px;
}
Adding padding to the bottom of the span will increase the size/length of the span by adding space to the bottom only. It will not push the span up from its original location, but it will push elements below it further down the page (because the span is now larger).
When you added 2000px bottom padding to the span, it was over 2000px tall, and was taller than your browser window, thus causing the scrollbar. Adding a background color to your element is a good way to see how padding and sizing work.
Here's a good detailed article from W3C on the box model including margins and padding http://www.w3.org/TR/CSS21/box.html#box-margin-area
And here is an easy article with a "Try it yourself" example: http://www.w3schools.com/css/css_boxmodel.asp
You should rather write 'Palavra' in the div itself.
<div id="bar">
<span>
Palavra
</span>
</div>
Once you close the tag the will start from the very next line.
Moreover, If you want to take the content upward you have to work with the padding-top not the bottom one ! But, this will not help you taking your content into the as starts after the .
By adding padding-bottom you are increasing the size of the CSS box as per the Box model which is worthless here!
I am trying to have an arrow fixed to the bottom of a div section , but for some reason its not working ,
here is my html code:
<section>
<div style="margin:auto; text-align: center; position:relative; width:61px">
<a class="scroller-arrow" href="#offset2"></a>
</div>
</section>
The CSS code :
section {
padding: 10%;
margin: 0 auto;
background-image: url("/images/text-bar-strip.png");
background-repeat: repeat-x;
height: 393px;
}
.scroller-arrow
{
background-image: url("/images/down-arrow.png");
cursor: pointer;
display: block;
height: 61px;
margin: 0 auto;
width: 61px;
position:fixed;
bottom:-11px;
}
its always showing at the bottom of my screen not the bottom of the section ?
Could you help me much appreciated :)
After clearing things up in the discussion, I believe this is what you're looking for: http://jsfiddle.net/WBF6s/
Changes include:
Removing the div.
Setting position:relative on the section.
Setting the a to be position:absolute and display:inline-block.
Setting the a to left:0, right:0, bottom:0, and margin:0 auto.
position:fixed, places the element relative to the window.
With position:absolute, the element will be moved relative to the nearest positioned parent, which means that the container must have itself a position property set.
What we usually do is make the container relatively positioned, by setting its position property to relative.
So, you should make your section or your div relative, and your arrow absolute.
as an FYI, position:fixed is reserved for placing an element on the screen regardless of the other elements there. It will fix itself to the window no matter what. If you would like it to be stuck at the bottom (or top or anything) of an element, you need to use position:absolute. The caveat with position:absolute is that you will always need its parent to have a position on it. The most non-destructive way is to give your parent position:relative and this will make sure that the parent is always in the same spot.
I've made a very quick jsfiddle to show you what's wrong:
http://jsfiddle.net/AuGe2/
When you want to position something to the bottom of an element, you need it to be
.arrow{
height:40px;
width:40px
position:absolute;
bottom:0;
left:50%;
margin-left:-20px //Or half the width of the element
}
Notice the left:50% and margin-left:-20px This is what centers an absolute element in a box. You are moving the element 50% of the way over of the parent's width, then you need to back-track a bit because it's moving the left-most side of the element. You backtrack by subtracting the same margin at half the size of the element. You can do the same with top as well.
I'm using a css drop shadow technique found here:
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
It uses the psuedo classes, before and after, to give more shape to your shadows. The problem is that I can't get the shadow to display over other elements.
Here is jsfiddle: http://jsfiddle.net/S7dzj/6/
I have tried various relative positioning of the div's with different z-indexes.
I have also tried to move the header element within the top div, no help.
I have also tried moving the top div relatively top: -5px to make it go underneath the header div but still no shadow.
Is there a way to accomplish this?
The z-index property only applies to elements which are not position: static, so your .top class was merely ignoring that property.
Your .header and .top classes both had the same z-index, so the header was appearing on top.
See the updated jsFiddle. All I did was add position: relative (which doesn't visually do anything on its own) to .top and change it's z-index to -2.
If you want the shadow to overlap .top, then see animuson`s answer.
If not, see http://jsfiddle.net/S7dzj/8/
.drop-shadow{
margin-bottom:10px;
}
If you add margins, you wil see the shadow.
I am trying to position this sale banner over the image. The red border is a fixed width div that is as wide as I need for the page layout. No matter what the size of the image is, I need to keep a space as wide as this.
The black border is a div that is only as wide as the picture, which I am trying to display the sale banner in the upper right corner on top of the picture.
EXAMPLE: http://jsfiddle.net/d5nxT/
I know I'm getting something messed up with the displays & positions. I just need the image & sale span to have the same settings, except the sale span floats to the right and has a higher z-index than the image.
See the fiddle and demo:
fiddle: http://jsfiddle.net/d5nxT/2/
Demo: http://jsfiddle.net/d5nxT/2/embedded/result/
float:right, z-index, position:relative, display:inline-block all are not required.
You need to position:absolute the sale span like this fiddle
You should change the css of the sale span to the following:
span.onsale {
display: inline-block;
width: 59px;
height: 59px;
z-index: 10;
background: url(http://i42.tinypic.com/sq49ow.png) no-repeat;
position:absolute;
top:0;
right:0;
}
This way the sale image is place in the top right corner of the parent image (hence the top:0 and right:0 styles)
There are 2 things that need to be done to do this kind of placements flawlessly.
You need a positioned (not fixed) element as a parent.
Your child needs to become absolute.
If you ensure these 2 things you will be able to position child elements relative to the parent with the top, left, bottom and right properties in css.
For you that probably means div.interior-images needs to get the property position: relative. And span.onsale gets the properties position: absolute and right: 0.
Your altered jsfiddle can be found here