i know what is absolute & relative position but some points are still not cleared to me.
for reference
css:
.rel{
position:relative;
background:red;
}
.abs{
position:absolute;
background:blue;
}
html:
<div class="rel">rel</div>
<div class="abs">abs</div>
now points are :
relative div takes 100% width automatically but absolute div only takes content width. why?
when i give height 100% there is no effect in the relative div but absolute div takes 100% height. why?
when i give margin-top:30px it's shift absolute div also but when i give top:30px then only relative div shift. why?
when i don't give top:0 , left:0 to the absolute div it's takes above div height. why?
Setting position:absolute removes the element in question from the normal flow of the document structure. So unless you explicitly set a width it won't know how wide to be. you can explicitly set width:100% if that is the effect you're after.
An element with position:relative on the whole behaves in the same way a normal position:static element does. Therefore, setting height:100% will have no effect unless the parent element has a defined height. In contrast absolute positioned elements are removed from the document flow so are free to adjust to whatever height their containing element currently has.
This is probably something to do with the parent elements in your HTML but I can't help further unless you provide the full HTML and CSS of your page.
The default value of the top and left properties is auto. This means the browser will calculate these settings for you and set them to where the element would be rendered if it didn't have position:absolute.
Related
https://jsfiddle.net/z3fhtbq9/
I expect the above fiddle will show the background color red from top to bottom of the body.But it doesn't.Why?
<div style="background-color:red;position:relative;top:0px;bottom:0px;">
Add a div size (height width)..it will work
<div style="height: 100vh;background-color:red;position:relative;top:0px;bottom:0px;">
</div>
The div had height 0 and width 0(width was same always) thats why no change was observed. If you had added something inside the div like some text or simply gave a height-width it could have worked.
Here 100vh means the element will always be 100% height of the viewport a device has.
An element with absolute positioning is not affected by other elements
and it doesn't affect other elements. So basically it is not affected
by any other element. So the 100% vh doesn't work on it. It will work
if you put in a relatively positioned div of full size.The absolutely
positioned element is positioned relative to nearest positioned
ancestor(non static).
I don't see relation to positioning, but to fill the body with this div, you need to set the width and height of the elements. You can set on css:
html, body {width:100%; height:100%; margin:0;}
and on your div style you add width and height 100%, like this:
<div style="width:100%; height:100%; background-color:red;position:relative;top:0px;bottom:0px;"></div>
Or you can just put the red background style on the body div.
How does the transform:translate3d(50%,0,0) differ from left:50% in css?
heres the jsfiddle that i made.
transform: translate3d(50%,0,0)
and
left:50%;
translate3d(50%,0,0) considers the percentage as of the element itself, so it is being translated from the left half of the element size.
The left of the div that is positioned absolute in the fiddle is relative to the container div which is positioned relative, so the left:50%;is 50% of this container.
Left value describes width related to parent element(or what it would be if width :100% was set)
transform values describe in relation to its own width
Since you have explicitly set a width, the 2 results are different
I have a container div which contains an element with fixed proportions (an image for simplicity, but can be a video too). From now, I'll identify the container div with container and the element inside it with element.
Requirements
Here's what I'm trying to get (possibly using CSS only, without JS)
container must be 100% of window width and 50% of window height (see height exception in requirement n.5)
element must fill 100% of container width and keep its proportions (don't have to be deformed from window resizes)
element must be centered both vertically and horizontally inside container
when element height is higher than container height, excess parts of element above and below container must be hidden
when element height is lower than container height, container height must fit element height
The goal is to essentially create something equivalent to what background-size:cover does with images, but applied to a generic element with fixed proportions.
My (partial) solution
Here's my actual code. I've managed to achieve requirements n.1,2,4 (see fiddle) but I'm still struggling to find a solution for 3 and 5. In the posted fiddle I've commented overflow:hidden property and set a border to container to better show my goal.
.container {
margin-top:100px;
border:2px solid red;
height:50vh;
display:block;
/*overflow:hidden;*/
position:relative;
}
.container>* {
position:absolute;
top:-25vh;
display:block;
width:100%;
z-index:-1;
}
Any ideas?
I have a div that I wish to position at the bottom of the webpage. I can achieve this using position:absolute. However, I don't want it to overlap the div above when the window is made smaller. This was achieved by changing it to position:relative however as expected it does not stay on the bottom of the page on bigger screens.
Is there a way in which this is possible?
Current CSS
position:relative;
bottom:0;
background-image:url('.......');
background-repeat:repeat-x;
background-position:bottom;
width:100%;
An example of what I was explaining.
As for me, the best idea is through creating a container DIV for all page content (stretch it to fit all screen using popular practices). Then you can put your footer to the bottom of this container by setting position: absolute and bottom: 0, and don't forget to set padding-bottom: height of your footer to the container. This will prevent overlapping your footer by content of the page.
Try giving min-height to DIV above footer DIV.
When the window becomes smaller, use media queries for that particular resolution or a resolution lesser than that and apply a display:none; to that div with the class that has a position absolute, if you do not want it to display or z-index:0; or z-index:-1; if you want to show it below the contents div.
Hope this helps.
You could set a margin-bottom of the height of the absolute element on the upper div. This way, your absolute positioned element will overflow with the margin instead of the element itself.
The way I see it, you should revert back to position: absolute, then try giving it a low z-index value, such as z-index: -1
Can you look at jsFiddle example and tell me why my green <div> won't stick to the bottom of its parent's scrollable height? I'm sure it's something simple. Thanks in advance!
You're not specifying any positioning for the wrapper element (body in this case) so your element is positioning to the bottom of the window.Try assign a position different from static to the wrapper element (relative,absolute whatever it's fine and it depends on your needs)
give a look here
this might help you
hope this help
If the answer to my comment is yes, than give you body tag a position of relative
body
{
position: relative;
}
If some other element is the parent, just replace body with that element. With you given code, the green div is not sticking to the bottom because it is absolutely positioned and does not have any relative or absollutely positioned parent/ancestor, in which case it will position itself relative to the viewport/browser window/canvas (not the canvas element in HTML5) which may or maynot be the html or body element depending on the user agent/browser. When you give the body a position of relative, it provides a new positioning context and than the green div will be positioned relative to the body element. In case if the body tag is not the parent, give the position relative to the parent element, which ever that may be.
Fiddle
Try this:
#green{
position:fixed;
...
}