I always hear that the main difference between relative and absolute that absolute can be placed out of its parent boundary!
if I can do same thing absolute does using relative, so what is the advantage of using absolute over relative>
An example
<style>
* {
margin: 0;
padding: 0;
}
.first_div {
width:300px;
height:300px;
background-color:red;
margin: 50px auto;
}
.second_div {
width:140px;
height:140px;
background-color:green;
position: relative;
top: 50px;
right: 80px;
}
</style>
<div class="first_div">
<div class="second_div"></div>
</div>
as you see I can place the green square anywhere in the page using relative same as absolute does
So what's the main advantage of using absolute over relative ?
The advantage of absolute is that you can easily position your div anywhere you want with "bottom:"";, top:"";, right:""; and left:""; - however this cause problems when you are making responsible websites - unless your absolute element is in a relative element.
I would avoid both if possible because mobile devices go haywire when you focus on an input, for example, that is positioned this way. The keyboard display pops up and you're input is now covered up and your UI is hosed.
Stick with margin.
Related
I created two sibling divs and applied negative margin on the last one, but when I added position: relative to the first one, it overlapped its next sibling:
.box {
width: 100px;
height: 100px;
}
.box-1 {
position: relative;
background: orange;
}
.box-2 {
margin-top: -50px;
background: yellowgreen;
}
<div class="box box-1">box-1</div>
<div class="box box-2">box-2</div>
However, MDN says that
positioned (absolutely or relatively) with a z-index value other than "auto" will create a new stacking context.
So I guess it isn't the stacking context that causes overlapping, any idea about how this happens?
Standard blocks in the normal flow, without any positioning property, are always rendered before positioned elements, and appear below them, even if they come later in the HTML hierarchy.
Example being
.absolute {
position: absolute;
background:purple;
left: 80px;
}
.relative {
position: relative;
left:50px;
background:yellow;
top:-50px;
}
div {
width:100px;
height:100px;
border: 1px dashed #999966;
background:blue;
}
<div class="absolute">absolute</div>
<div>normal</div>
<div class="relative">relative</div>
<div>normal</div>
Something cool about relative though, is that it's still considered to be in it's original location, even if it's been moved if you're using left, right, top, bottom. If you use margins to position the element the boundaries of the container are also moved with it. This can be seen using the same example above but changing the relative position to use margining. Reference to relative positioning
Non-positioned elements are always rendered before explicitly positioned elements. This means that by applying position: relative to 'box-1', it is rendered after 'box-2' and so appears on top of it.
The overlapping is caused by margin-top: -50px; in your CSS
Here is a decent explanation:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index
Standard blocks in the normal flow, without any positioning property, are always rendered before positioned elements, and appear below them, even if they come later in the HTML hierarchy.
I am trying to make a simple html site:
http://www.williamcharlesriding.com/test/index3.html
The problem is the buttons, which are png's and I am trying to position over the various areas of the background image, using css like this:
.but1 {
opacity:0;
filter:alpha(opacity=0);
position:fixed;
top:463px;
left:36px;
}
However I have noticed in different browsers and depending on the zoom factor the buttons can be way off their intended mark. Any advice on this would be appreciated,
Thanks
Set your .content container to position: relative and change each button div from position: fixed to position: absolute. The relative position on the container will make the absolute position relative to your div, rather than the browser.
.content {
padding: 10px 0;
background-color: #5a5958;
margin-left: auto;
margin-right: auto;
position: relative;
}
I would probably add another class to each, so you could do something like this:
<div class="but but1">
<div class="but but2">
.but { position: absolute; }
.but1 { top: 463px; left: 36px; }
Normalize.css might help, it contains default CSS for all browsers. Be sure to include it before your main CSS. Sorry, as the other answer states the problem is that you are positioning relative to the browser window, not the parent element.
I have an absolute positioned logo on the bottom left of my website... BUT the problem is that ive positioned it to stick to the right of the page but it leaves a invisible barrier to the left of it that spreads across the page. So lets say a link is placed in alignment with that footer element, I won't be able to click it, the absolute positioned layer is spreading over it (even though nothings in it)
Heres my CSS for the logos position:
#basemenu {
margin-right: auto;
position: fixed;
bottom:0px;
width: 100%;
height: 40px;
text-align:right;
right:1%;
}
It sounds like you have an img inside of a <div id='basemenu'></div>. Is that right?
We could really use a block of HTML if you wouldn't mind posting it.
What I don't understand is why you can't target the logo itself with a bit of CSS like this:
#basemenu img {
height: 40px;
position: fixed;
bottom: 0px;
left: 0px;
}
Use the following block property display : none; to hide the block
I'm confused here... Here's my site that I'm working on: http://s361608839.websitehome.co.uk/marbleenergy/
The div #main is sitting about 10px below #navigation and I've tried bringing it up 10px by adding:
#main {
margin-top: -10px;
}
Had no luck there unfortunately. I'm learning CSS here, what is it I need to do?
Thanks
using absolute positioning isn't so flexible since you're aligning your div's in hard pixel measure. This will probably cause some error on several browser
Use relative positioning instead, and use top attribute to lift that div up
this is the code
#main{ position: relative; top: -10px; }
Add the following to the #main div
#main {
position: relative;
top:-10px;
}
position: relative; Will position the element relative to where it normally sits and aligning -10px from where it would sit will bring it into the gap you have made in your menu div. Haven't checked your site but can't see any reason why this won't work. I prefer not to set my elements to position: absolute; as the above member answered as any content under the div will be pulled up under the absolutely positioned div.
As the other answer more clearly details, you need to make sure that positioning is absolute, in order for any 'px' CSS specification to make sense, if not, it defaults to relative (to nearest parent container) I believe.
USE
#main {
position relative;
margin-top:-10px;
}
See Demo: http://jsfiddle.net/rathoreahsan/fSDpJ/
I browse your website in your case you need to use the following css:
#main {
position absolute;
margin:-10px 0 0 12px;
}
OR
#main {
position relative;
margin:0 0 0 12px;
top: -10px;
}
I'm really stuck here...
I have a site layout with a central layout (it's about 922px width, centered on the page)... I have a little logo that is to the top left of this, but it sticks about 10 pixels to the left of the central design. If you can imagine, it sort of sticks out to the left of the design...
Now, I was told that absolute positioning would make this happen. But I can't see how the logo would work with absolute positioning if the design itself it in the center of the page. I think this is to make sure it works in IE6... I have tried floating the logo in the central header, and then applying a negative margin of margin-left: -10px; which does work, but I've read this doesn't work in IE6.
Without a snippet of code its hard to tell, but it's probably an issue with where your element is getting it's 'absolute' positioning from. 'Absolute' is a misnomer. It really means "absolute...relative to the nearest positioned parent". So if in your design, you don't have a parent element with the css "position" style on it, it's going to take its position from the body element (which may have some margin/padding on it depending on your browser).
Adding a position: relative; to the element that you want to be the "outermost" container will allow you to specify position: absolute on an item within it, and specify your exact coordinates from there.
Set "position: relative" on a container div.
<style type="text/css">
div.page {
position: relative;
margin: 0 auto;
width: 922px;
}
div.page img.logo {
position: absolute;
left: -10px; top: 0;
}
</style>
<div class="page">
<img class="logo" ... />
</div>
Though.. I would rather make it work without absolute positioning.
When you position your logo absolutely it needs to be placed relative to something. That something is normally the viewport edge. If the logo is inside an element that is positioned relatively then it will instead be positioned relative to that element. So the answer is to make your centered page div display:relative; so the logo always aligns to the page not to the edge of the browser window. Here is an example:
The HTML:
<div id="centeredpage">
<img id="logo"... />
</div>
The CSS:
body {
text-align:center;
}
#centeredpage {
width:922px;
margin:0 auto;
text-align:left;
position:relative;
}
#logo {
position:absolute;
top:0;
left:-10px;
}
I hope that helps.