I wanted to set a top header in a fixed position and have content scroll underneath it and came across some strangeness. If I set a margin-top to the content div that margin would also affect the header and move it down even though it's set to position:fixed. I found a workaround by setting the content div to position:relative and using top: to offset it the same amount, but I find it strange that a non-nested div can affect a fixed-positioned element and would like to know why it happens.
I get the same thing in Safari, Firefox and Chrome. In Opera the margin pushes down the content and leaves the header in place, which is what I expected it to do, but compared to the other results maybe it's Opera that has it wrong. What I'm talking about can be in seen in this JSFIDDLE (don't use Opera! :) ).
Here's the code:
css:
body {
background:#FFD;
}
#header {
position:fixed;
height:15px;
width:100%;
text-align:center;
border-bottom:1mm dashed #7F7F7F;
background-color:#EEE;
}
#content {
width:90%;
margin-top:25px;
margin-left:auto;
margin-right:auto;
background-color:#E5E5FF;
border: 1px solid #000;
}
html:
<body>
<div id="header">
HEADER
</div>
<div id="content">
<p>Text1</p>
<p>Text2</p>
<p>Text3</p>
<p>Text4</p>
</div>
</body>
#header {
top: 0px !important;
}
#content is fixed position, but the coordinates that you set for top, right, bottom and left are relative to its parent container: #header. In other words, #content is always going to be fixed to the top of #header. Since you are bumping #header down with margin, the #content will follow.
You either need to offset the margin
#content { position: fixed; top:-25px; }
That said, I assume you want to fix something to the top of the screen and I don't think this is going to get you what you want. You'll need to break #content out of #header or else make #header statically positioned: position:static so that the content is fixed to the top of the window, not the header.
Or set the top padding (instead of top margin) for #content to be the height of #header.
We have figured the ways to correctly position the header, but I'm still very curious why the offset happened at the first place.
I believe you are feeling the affects of "margin collapse", which is causing your "margin-top" entry in "content" to collapse into the body element of the page. An easy fix is to just create a containing div around "content" and "header" and set the CSS to "overflow:hidden". Then, be sure to set the margins and padding of the "body" element to 0.
Related
So I have a div at the bottom of my page which is good, the problem is that it is overlapping my sidebar on the left, so how do I scoot it over? I trued to do float:right, but it does not seem to do anything, I'm assuming because it's in a fixed position. I also tried to change the width, but that just cuts it from the right side. So how can I get it where I need it, which is just taking up the remaining part of the page where the side bar is not?
I'm shooting for this look:
.footer {position:fixed; bottom:0; float:right; background-color:lightgray; font-size:90%}
You could use FLEXBOX for that
I made a little fiddle using flexbox since you didn't provide your layout
JSFIDDLE
The fixed property for the footer is not required.
Also, specifying the footer element as block will
ensure proper behaviour when applying style to it.
.footer { position: relative; display: block; background-color: #f2f2f2; float: right; font-size: 90%; width: auto; overflow: hidden; }
The width was set to auto because I don't the exact size of your sidebar. To set it to a number, you need to perform some calculation. For example:
If the sidebar width is 30%, and also has a border, then the total width is: 30.2%;
That is, 1px left plus 1px right borders.
Although, the size depends on the border width.
Then the footer width should be set to 68.8% or 68.75% if it has no border.
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.
Consider the following very simple code:
<div id="parent">
<div id="child">
Test it
</div>
</div>
and the CSS:
#parent{
position:relative;
margin-left:200px;
color:#FFF;
}
#child{
position:fixed;
top:30px;
background-color:red;
}
I supposed child div would not inherit margin-left from parent div since child breaks the normal flow. However, not only does it inherit the 200px margin; moreover, if I try to assign margin-left:50px to child div the result is a left margin of 250px!! Why that happens and in what way may I change it?
Thank you
Jsfiddle:http://jsfiddle.net/rCMx2/
The reason - unless you specify horizontal positioning axes (left: ... or right: ...), the child element, even if it is a fixed positioned one, will still be horizontally positioned like it would have been without being fixed positioned.
Same for vertical axes (top: ... or bottom: ...) and its vertical position.
It would just not move from that initial position, since it is a fixed positioned element.
So, in other words, declaring position: fixed and top: ... does not change the horizontal position of the element, only its vertical. Its horizontal position is still its natural one.
The solution - add left: ... or right: ... to the fixed positioned element in order to 'disconnect' it from its initial horizontal position.
You are adding a margin of 50px on top of the margin for your parent. This might help you visualize what is happening:
#parent{
margin-left:200px;
color:#FFF;
border:2px solid #f0f;
overflow:visible;
}
#child{
top:30px;
background-color:red;
margin:20px;
border:2px solid #0f0;
}
Try that. Can you more easily visualize what is happening now? Note that I removed the "position" attributes.
In order to achieve a more specific result, I need to know WHAT you want your final layout to look like.
He is taking the position of 200px div parent who is on. As the div child is fixed, she is taking on the father as parameter to leave the stream.
You can remove the div son of his father, separating from them.
And align the div fixed to left: 50px out instead of using margin-left: 50px.
Hope this helps.
Here's an example: http://zip.net/bjmY23
I am trying to understand css positioning.
What I am trying to accomplish is : I want that when I set a div position , div's after it, change position respect of the first div moved ,without overlapping them.
Let's make an example :
HTML
<div class="wrap">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
CSS
.wrap{
position: absolute;
background-color:yellow;
width:500px;
height:600px;
margin:0 auto;
}
.box1,.box2,.box3{
position: relative;
width:450px;
height:150px;
margin:0 auto;
}
.box1{background-color:red; top: 100px;}
.box2{background-color:green;}
.box3{background-color:blue;}
Now , when I set , e.g top:100px on box1 , it goes 100px from the top, but box2 and box3 still remains there. I want that when i set top position on one of the div they "suffer" the change of the set position , and not overlap or get overlapped by other divs
I tried, as you can see, with position: relative but It did not reach my goal.
Sorry if I explained it better , it's hard to me to explain it in English.
top property (as left, right and bottom) is used to positioning absolute elements only.
giving this property to the element probably gives it absolute behavior.
to position a relative element you should use margin-top instead.
HERE is a working fiddle
Use margin-top instead of top. Top/Bottom/Left/Right changes the position from where it would normally be, and therefore it doesn't affect the rest. Margins will affect the rest too.
http://jsfiddle.net/eux4C/3/
.box1{background-color:red; margin-top: 100px;}
The css top property can be used only on elements with position absolute (as talked in chat :-).
For a relative positioned element you should use margin-top property like:
.box1 {background-color:red; margin-top: 100px;}
Here is a working fiddle: http://jsfiddle.net/IrvinDominin/eux4C/4/
It sounds like you really want to preserve the standard box model, rather than ignoring it.
Don't set a position: relative, and use padding
-top or margin-top to add the extra space.